I am trying to style the closePath() on my canvas but am at a loss on how to do that, as a matter of fact I would actually like all the lines to have a different style, for this question lets stick to getting different colors. ! As you can see I have a triangle, how can I have differing strokestyles for each line? Here is link to the Code Pen

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(20, 140); 
ctx.lineTo(120, 10);  
ctx.strokeStyle = "green";
ctx.lineTo(220, 140); 
ctx.closePath();  
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="canvas"></canvas>

2 Answers

1
enhzflep On Best Solutions

Each segment needs to be coloured.

function qsa(sel,par=document){return par.querySelectorAll(sel)}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
 draw();
}

class vec2d
{
 constructor(x=0,y=0)
 {
  this.x = x;
  this.y = y;
 }
}

function draw()
{
 var verts = [ new vec2d(20,140), new vec2d(120, 10), new vec2d(220,140) ];
 var colours = ['red', 'green', 'blue'];

 let can = qsa('canvas')[0];
 let ctx = can.getContext('2d');
 
 var numLineSegs = verts.length;
 for (var lineSegIndex=0; lineSegIndex<numLineSegs; lineSegIndex++)
 {
  var index1 = lineSegIndex;
  var index2 = (lineSegIndex+1)%verts.length;
  
  ctx.beginPath();
  ctx.strokeStyle = colours[index1];
  ctx.moveTo(verts[index1].x, verts[index1].y);
  ctx.lineTo(verts[index2].x, verts[index2].y);
  ctx.stroke();
 }
 ctx.closePath();
}
<canvas width=512 height=512></canvas>

2
Anurag Srivastava On

You would need to have the three lines as three separate paths.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 140); 
ctx.lineTo(120, 10); 
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(120, 10); 
ctx.lineTo(220, 140); 
ctx.strokeStyle = "green";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(220, 140); 
ctx.lineTo(20, 140); 
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="canvas"></canvas>