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 ???

kennytm · Accepted Answer · 2010-09-11 10:46:45Z

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

answered Sep 11, 2010 at 10:46

kennytm

526k111 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goutham Over a year ago

any good resource to learn canvas in detail .. and any good lib to use to develop canvas code .. like above one .

Collectives™ on Stack Overflow

multiple instances in canvas : javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related