CODEWITHSUNDEEP
javascript
PESfcs
PESfcs

Reputation: 115

JavaScript - How to draw few shapes with a space between them, by using a for loop and canvas

I'm trying to draw a line of squares by using a for loop. When I say line I mean that I want one square standing next to other one but with a space between them.

I tried the next code -

The html part -

<canvas id="myCan" height="300px" width="300px"></canvas>

and the script part -

        $(document).ready(function () {
        var canvas = document.getElementById("myCan");
        var ctx = canvas.getContext("2d");


        var positionx = 50;
        var positiony = 50;
        var i = 0;
        for (i; i < 20; i++) {

            ctx.fillStyle = "rgb(255, 0, 0)";
            ctx.fillRect(positionx, positiony, 50, 50);

            positionx += 2;


        }


    });

The thing is that I'm getting a simple Line- meaning there's no space between the squares.

How can i fix it?

Thanks for any kind of help

Upvotes: 0

Views: 469

Answers (1)

twh
twh

Reputation: 109

Change positionx += 2; to positionx += 52;

At the moment what you tell the browser is: draw this shape 50 px wide, then move 2 px to the right and draw the next shape 50 px wide. What you want is: draw this shape 50 px wide, then move 50px+X to the right and draw the next shape.

Working fiddle: http://jsfiddle.net/34zcda9q/

Upvotes: 1

Related Questions