multiple instances in canvas : javascript

I am using it this way ..

  var canvas = document.getElementById("canvas");
  var contextGrayLine= canvas.getContext(开发者_JAVA百科"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 ???

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