CODEWITHSUNDEEP
javascriptloopshtml5-canvas
honey
honey

Reputation: 11

how to make a row of triangles using loops?

How do I make a row of triangles?

Here's the code I have so far.

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>

Upvotes: 0

Views: 190

Answers (3)

phentnil
phentnil

Reputation: 2279

You can create a separate function to handle drawing the triangles, then pass in the xStart as the base x-coordinate value for any triangle to be drawn. Then in the showDrawing function, run a loop and multiply the i variable to some spacing value. In your code, your triangle is 150 pixels wide and starts at x-value of 50, so I multiplied the i value by 200 for consistency in my solution code.

Additionally, I highly advise using the variable name you set (coolCanvas) as the reference to the canvas or set this variable to be named canvas instead. If you only ever set the canvas once and reference it once, you can probably skip setting the reference altogether:

let ctx = document.getElementById("canvas").getContext("2d");


function drawTriangle(ctx, xStart) {
  ctx.lineWidth = 5;
  ctx.strokeStyle = "blue";
  ctx.fillStyle = "purple";
  ctx.beginPath();
  ctx.moveTo(xStart + 126, 300);
  ctx.lineTo(xStart + 200, 400);
  ctx.lineTo(xStart + 50, 400);
  ctx.closePath();
  ctx.fill()
  ctx.stroke();
}

function showDrawing() {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  ctx.lineWidth = 5;
  for (let i = 0; i < 5; i += 1) {
    drawTriangle(ctx, i * 200);
  }
}
document.getElementById("draw").addEventListener("click", showDrawing);
canvas {
  border: 3px solid #000000;
}
<div><button id="draw">Drawing</button></div>
<div><canvas id="canvas" width="1500" height="700"></canvas></div>

Upvotes: 0

Justin
Justin

Reputation: 2958

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>

Upvotes: 1

Brewal
Brewal

Reputation: 8189

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>

Upvotes: 0

Related Questions