несколько экземпляров на холсте: JavaScript

Question

Я использую это таким образом ..

  var canvas = document.getElementById("canvas");
  var contextGrayLine= canvas.getContext("2d");
  var contextRedLine= canvas.getContext("2d");

  contextGrayLine.lineWidth = 50;
  contextRedLine.lineWidth = 20;
  contextGrayLine.beginPath();

  contextGrayLine.moveTo(10,10);
  contextGrayLine.lineTo(500,10)

  contextGrayLine.strokeStyle = "#AAA";
  contextGrayLine.stroke();

Я создал два экземпляра canvas, но redLine.lineWidth поверх записывает значение grayLine.lineWidth ... почему это происходит ???

Answer 1

Поскольку contextGrayLine и contextRedLine относятся к одному и тому же объекту контекста. Вам нужно нарисовать две стилизованные дорожки независимо, например,

var ctx = canvas.getContext('2d');

ctx.lineWidth = 50;
ctx.strokeStyle = '#aaaaaa';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(500, 10);
ctx.stroke();

ctx.lineWidth = 20;
ctx.strokeStyle = '#ff0000';
...