canvas tag drawing lines problem…

StackOverflow https://stackoverflow.com/questions/1232146

  •  22-07-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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>

OTHER TIPS

Why do you use parseInt, is your space variable has type of string? If not, try to remove parseInt.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top