views:

448

answers:

2

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.

A: 

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

Paul Podlipensky
I removed it, it still can't draw the all green lines.
Ted Wong
+1  A: 

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>
maksymko
I am developing the webOS....
Ted Wong