Menu
I want to draw a shape that has a double line border using html5 canvas path. The default stroke (context.stroke()) has a single line type of path. I can draw a similar shape inside an original shape to generate a figure that looks like a one made with two border lines, but I want some kind of generic solution. Any ideas?
672
The stroke() method of the HTML canvas is used to draw the path. This path is drawn with moveTo() and lineTo() method. The <canvas> element allows you to draw graphics on a web page using JavaScript. Every canvas has two elements that describes the height and width of the canvas i.e. height and width respectively.
To set the stroke color of text using HTML5 Canvas, we can set the strokeStyle property of the canvas context to a color string, hex value, or RGB value, and then use the strokeText() method to stroke the text.
strokeStyle. The CanvasRenderingContext2D. strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black). Note: For more examples of stroke and fill styles, see Applying styles and color in the Canvas tutorial.
Canvas Example The <canvas> element must have an id attribute so it can be referred to by JavaScript. The width and height attribute is necessary to define the size of the canvas. Tip: You can have multiple <canvas> elements on one HTML page. By default, the <canvas> element has no border and no content.
There are several ways to do this. One simple way would be to draw a fat line and "cut out" the middle of it, leaving two smaller strokes.
What you want to do is draw any kind of path - on an in-memory, temporary canvas - and then draw the same path with less thickness and with the globalCompositeOperation set to destination-out on that same canvas.
That will get you the shape you want, essentially 2 lines with transparency between them.
Then you draw that canvas onto the real canvas that has whatever on it (complex background, etc).
Here's an example:
http://jsfiddle.net/uTbsC/
176
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
