несколько экземпляров в полотне: 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(); 

я создал два экземпляра холста но 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'; 
...