Menu
I am trying to use HTML5 canvas to draw a red line to the left of a green line. Here is my javascript:
var canvas = document.createElement('canvas'); canvas.height = 150; canvas.width = 150; var canvasContext = canvas.getContext('2d'); canvasContext.beginPath(); // Draw the red line. canvasContext.strokeStyle = '#f00'; canvasContext.moveTo(10, 0); canvasContext.lineTo(10, 100); canvasContext.stroke(); // Draw the green line. canvasContext.moveTo(50, 0); canvasContext.strokeStyle = '#0f0'; canvasContext.lineTo(50, 100); canvasContext.stroke(); document.body.appendChild(canvas); However, in Google Chrome, I get a dark green line to the left of a light green line. Why? I called stroke twice right? Hence, why should my first stroke affect my second one?
Here is a JSFiddle that illustrates what I mean.
882
To set the color of an HTML5 Canvas line, we can use the strokeStyle property of the canvas context, which can be set to a color string such as red, green, or blue, a hex value such as #FF0000 or #555, or an RGB value such as rgb(255, 0, 0).
To draw a line on a canvas, you use the following steps: First, create a new line by calling the beginPath() method. Second, move the drawing cursor to the point (x,y) without drawing a line by calling the moveTo(x, y) . Finally, draw a line from the previous point to the point (x,y) by calling the lineTo(x,y) method.
In a sense, you can't really "change" the color of an element on the canvas because it has no scene graph, or, in other words, it has no history of what has been drawn on the canvas. To change the color of a line, you would have to redraw the line. ctx. moveTo(0, 0); ctx.
The fill() method fills the current drawing (path). The default color is black. Tip: Use the fillStyle property to fill with another color/gradient.
You aren't calling canvasContext.beginPath(); when you start drawing your second line.
To make the drawing sections more independent, I added whitespace:
var canvas = document.createElement('canvas'); canvas.height = 150; canvas.width = 150; var canvasContext = canvas.getContext('2d'); // Draw the red line. canvasContext.beginPath(); canvasContext.strokeStyle = '#f00'; canvasContext.moveTo(10, 0); canvasContext.lineTo(10, 100); canvasContext.stroke(); // Draw the green line. canvasContext.beginPath(); canvasContext.moveTo(50, 0); canvasContext.strokeStyle = '#0f0'; canvasContext.lineTo(50, 100); canvasContext.stroke(); document.body.appendChild(canvas); Demo: http://jsfiddle.net/AhdJr/2/
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
