how do I make a row of triangles? here's the sample code. I'm new I don't know what to do here.

function showDrawing() {
    let coolCanvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    ctx.lineWidth = 5;
    
    for (let i = 0; i < 5; i  = 1) {
        ctx.beginPath();
        ctx.moveTo(126, 300); 
        ctx.lineTo(200, 400); 
        ctx.lineTo(50, 400);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'purple';
        ctx.fill();
        ctx.stroke();
    }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

how do I make a row of triangles? here's the sample code. I'm new I don't know what to do here.

CodePudding user response：

You should use a variable to add to the X positions and increment as you want :

function showDrawing() {
    let coolCanvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    let delta = 0;
    ctx.lineWidth = 5;
    
    for (let i = 0; i < 5; i  = 1) {
        ctx.beginPath();
        ctx.moveTo(126   delta, 300); 
        ctx.lineTo(200   delta, 400); 
        ctx.lineTo(50   delta, 400);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'purple';
        ctx.fill();
        ctx.stroke();
        
        delta  = 174;
    }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use the iteration (i) and multiply it by the spacing you want and add it to the x value.

function showDrawing() {
    let coolCanvas = document.getElementById("canvas");
    let ctx = coolCanvas.getContext("2d");
    ctx.lineWidth = 5;
    
    for (let i = 0; i < 5; i  = 1) {
        ctx.beginPath();
        ctx.moveTo(126 (i*170), 300); 
        ctx.lineTo(200 (i*170), 400); 
        ctx.lineTo(50 (i*170), 400);
        ctx.closePath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'purple';
        ctx.fill();
        ctx.stroke();
    }
}

<canvas id="canvas" width="1500" height="700" style="border:3px solid #000000;">
</canvas>

<button onclick="showDrawing()">Drawing</button>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>