Canvas Line Width Experiment

Canvas Line Width Experiment

by fxi

HTML

<canvas id='example' width="1500px" height="300px"></canvas>

JavaScript

var canvas = document.getElementById("example");
var context = canvas.getContext("2d");

var points = [
  [0, 0, 1],
  [50, 10, 5],
  [100, 20, 15],
  [150, 80, 20],
  [200, 100, 70]
];
var prev;

context.strokeStyle = '#ccc';

context.lineCap = "round";

points.forEach((p, i) => {


  if (i == 0) {

  } else {

    prev = points[i - 1];
    context.lineWidth = prev[2];
    context.beginPath();
    context.moveTo(prev[0], prev[1]);
    context.lineTo(p[0], p[1]);
    context.stroke();
    context.closePath();
  }

})