CODEWITHSUNDEEP
javascripthtmlcanvas
David Morrison
David Morrison

Reputation: 11

Canvas draw lines with a loop

Just learning java-script and canvas.
I was to make steps and can draw the first two lines.

I would like this to loop 7 times.
7 p1's and 6 p2's
so basically.
it goes down 7 times and across 6 times.

Thanks alot for looking.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5
var p2=10
ctx.moveTo(0,0);
ctx.lineTo(0,p1);
ctx.lineTo(p2,p1);
ctx.stroke();

</script>

</body>
</html>

Upvotes: 1

Views: 1384

Answers (4)

ADITYA UDAY UBALE
ADITYA UDAY UBALE

Reputation: 23

A more lenghty approach to the question but might be easy to understand.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var i=1;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5;
var p2=10;
var x=y=0;
ctx.moveTo(x,y);
for(i=1;i<14;i++){
    if(i%2==1){
        y+=p2;
        ctx.lineTo(x,y);
    }
    else{
        x+=p1;
        ctx.lineTo(x,y);
    }
}
ctx.stroke();
</script>
</body>
</html>

Upvotes: 1

Shahzad Fateh Ali
Shahzad Fateh Ali

Reputation: 724

Here is the solution.

    <!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var p1=7.5;
var p2=10;

var max = 7; // how many times

ctx.moveTo(0,0);

for(i=1; i <= max; i++){

ctx.lineTo(p2*(i-1),p1 * i);
ctx.lineTo(p2 * i,p1 * i);
}

ctx.stroke();


</script>

</body>
</html>

Upvotes: 1

Guy Dafny
Guy Dafny

Reputation: 1829

I do not understand your wish. will the next code help?

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var stepX=7.5
    var stepY=10
    var x=0,y=0;
    ctx.moveTo(0,0);
    for (var i = 0; i < 7; i++) {
        y += stepY
        ctx.lineTo(x,y);
        x += stepX;
        ctx.lineTo(x,y);
    }
    ctx.stroke();

</script>

</body>
</html>

Upvotes: 1

Aameer
Aameer

Reputation: 1376

I am not sure what you want but from what i can undersatnd you want to reuse the code snippet. You can do it by using a function and call that function with different point values. Hope it helps.

canvaspointsfn = function(ctx, point1, point2,){
        var p1= point1
        var p2= point2
        ctx.lineTo(p2,p1);
        return ctx;
    };
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0,0);
    //change vals 0f p1 p2 according your needs
    ctx= canvaspointsfn(ctx, p1, p2);
    ctx.stroke();

Upvotes: 1

Related Questions