Home/ Questions/Q 301497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T07:00:40+00:00

I have a canvas tag, I use it draw lines on that, the canvas

  • 0

I have a canvas tag, I use it draw lines on that,
the canvas is a square.
I use “space” to record the space between two lines.
and I have canvasWidth and canvasHight to record the canvas size, actually, they are the same numnber….320

        var x=0;
        for (var i = 0; i < 5; i++) {
            x = parseInt(x + space);

            myCanvas.fillStyle = "rgb(200,0,0)";
            myCanvas.fillRect(x, 1, 1, canvasHeight);
            myCanvas.fillStyle = "rgb(0,200,0)";
            myCanvas.fillRect(1, x, canvasWidth, 1);

        }

I can use the draw all the red lines on the canvas,
but the green lines only can draw two on the canvas, other just can’t appear,
I used try {}catch , and it is no error disappear.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What browser are you using?

    The problem does not seem to be in the code you’ve shown, because it works fine for me.

    Here is my example html:

    <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" height="320" width="320" />

<script language="javascript">
var myCanvas = document.getElementById('myCanvas').getContext('2d');
var space = 10;
var x=0;
var canvasHeight = 320;
var canvasWidth = 320;
for (var i = 0; i < 5; i++) {
    x = parseInt(x + space);

    myCanvas.fillStyle = "rgb(200,0,0)";
    myCanvas.fillRect(x, 1, 1, canvasHeight);
    myCanvas.fillStyle = "rgb(0,200,0)";
    myCanvas.fillRect(1, x, canvasWidth, 1);

}
</script>

</body>
</html>
    • 0