multiple instances in canvas : javascript

Question

I am using it this way ..

  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();

I have created two instances of canvas but the redLine.lineWidth over writes the grayLine.lineWidth value ... why is this happening ???

Answer 1

Because both contextGrayLine and contextRedLine refers to the same context object. You need to draw the two styled path independently, e.g.

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';
...