Home/ Questions/Q 7515755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:54:36+00:00

I was trying a script to draw graph paper like grids on the canvas

  • 0

I was trying a script to draw graph paper like grids on the canvas from dive into html5. The result is supposed to draw a mesh with squares of side 10px but i’m getting the size as approximately 20px, and not exact squares.
Here is the code,`

   <html>
      <head>     
           <style>
    body{
        margin: 20px 20px 20px 20px;
    }

    canvas{
        width: 500px;
        height: 375px;
        border: 1px solid #000;
    }
    </style>
    <script type="text/javascript">
        function activate(){
            var canvas =document.getElementById("exp");
            var context = canvas.getContext("2d");

            for (var x=0.5;x<500;x+=10){
                context.moveTo(x,0);
                context.lineTo(x,375);
                console.log(x);
            }

            for (var y=0.5;y<375;y+=10){
                context.moveTo(0,y);
                context.lineTo(500,y);
            }

            context.strokeStyle="#000";
            context.stroke();
        }
    </script>
</head>

<body>
    <canvas id="exp"><script type="text/javascript">activate();</script></canvas>
</body
     </html>

And this is the output:
canvas rendered
while the actual output should be:
actual canvas
Note: i’m not worried about the color difference. what i don’t understand is why the space between 2 lines is ~20px(as checked by a measurement tool on firefox) instead of 10px.

Also, on printing the values of x, it gives the right value(i.e. incremented by 10 each time).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can not set the canvas’ size with css
    you should set in the DOM’s attribute.

    <canvas width="100" height="200"></canvas>
    • 0