HTML5 Canvas drawing líneas multicolores

Estoy tratando de dibujar dos líneas paralelas en el lienzo, pero parece que las propiedades de este último sobrescriben el primero. Para sugerir lo que podría estar equivocado:HTML5 Canvas drawing líneas multicolores

<html> 
<head> 
<script type="application/javascript"> 
    function draw() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    // draw a 10 pix green line 
    ctx.strokeStyle='#00cc00'; 
    ctx.lineWidth=10; 
    ctx.moveTo(100,0); 
    ctx.lineTo(100,1000); 
    ctx.stroke(); 
    // draw a 20 pix red line 
    ctx.strokeStyle='#cc0000'; 
    ctx.lineWidth=20; 
    ctx.moveTo(140,0); 
    ctx.lineTo(140,1000); 
    ctx.stroke(); 
    } 
    </script> 
    </head> 
    <body onload="draw()"> 
    <div><canvas id="canvas" width="1000" height="1000"></canvas></div> 
    </body> 
    </html>

Fuente

2010-08-29 Amarsh

llamada ctx.beginPath antes de dibujar cada línea. Cuando se realiza la llamada fuerte stroke, la primera línea sigue siendo parte de la ruta actual por lo que se dibuja nuevamente en el nuevo color.

Fuente

2010-08-29 12:11:23

gracias funciona – Amarsh

HTML5 Canvas drawing líneas multicolores

Respuesta

Cuestiones relacionadas