0

I am testing this in Chrome. I tried a line thickness solution from StackOverflow here that did not work.

I have a object called redLine with a position and an array of offset positions. The only thing that is affected is the alpha value. Color and line thickness stays once it is set. 

function renderRedLine(){

    context.beginPath();

    for(j=0; j<redLine.posArr.length; ++j){                 

        var startPoint 

        if(j===0){
            startPoint = redLine.pos
        }else{
            startPoint = redLine.posArr[j-1]
        }

        var endPoint = redLine.posArr[j]

        let alpha = 1.0 - (j/(redLine.posArr.length-1))

        let g = 150 - (10*j)

        context.strokeStyle = 'rgba(255, ' + g + ', ' + 0 + ', ' + alpha + ')'
        context.lineWidth = j+1

        if(j===0){
            context.moveTo(startPoint.x, startPoint.y);
        }else{
            context.lineTo(endPoint.x, endPoint.y);
        }

        context.stroke();

    }

    context.closePath();

}
Chewie The Chorkie
  • 4,896
  • 9
  • 46
  • 90

1 Answers1

1

You need to call ctx.beginPath() after each ctx.stroke() otherwise, all the next lineTo() will be added to the one and only sub-path and when you'll call stroke() again with a thicker lineWidth, the whole sub-path will get redrawn, covering the thinner lines that were drawn before.

const context = canvas.getContext('2d');
const redLine = {
  posArr: Array.from({
    length: 12
  }).map(() => ({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height
  })),
  pos: {
    x: canvas.width / 2,
    y: canvas.height / 2
  }
};
console.log(redLine);
renderRedLine();

function renderRedLine() {

  for (j = 0; j < redLine.posArr.length; ++j) {
    // at every iteration we start a new sub-path
    context.beginPath();

    let startPoint;
    if (j === 0) {
      startPoint = redLine.pos
    } else {
      startPoint = redLine.posArr[j - 1]
    }

    const endPoint = redLine.posArr[j]
    const alpha = 1.0 - (j / (redLine.posArr.length - 1))
    const g = 150 - (10 * j)

    context.strokeStyle = 'rgba(255, ' + g + ', ' + 0 + ', ' + alpha + ')'
    context.lineWidth = j + 1
    // since we start a new sub-path at every iteration
    // we need to moveTo(start) unconditionnaly
    context.moveTo(startPoint.x, startPoint.y);
    context.lineTo(endPoint.x, endPoint.y);

    context.stroke();
  }

  //context.closePath is only just a lineTo(path.lastMovedX, path.lastMovedY)
  // i.e not something you want here

}
<canvas id="canvas"></canvas>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thanks Kaiido, that varies the line width, but now they do not connect, so I think that means you can't have connecting lines vary width? Also the color (even without the width change) varies, but the lines do not connect. Is there any way to have connecting line segments vary color? – Chewie The Chorkie May 30 '19 at 14:06
  • 1
    Yes, but that's not that easy: https://stackoverflow.com/questions/24027087/gradient-stroke-along-curve-in-canvas – Kaiido May 30 '19 at 14:10