(simplified) : I've have created this simple code to create an
The result is :
but I don't want it to be full filled with red.
I need something like this : (edited with photoshop)
(simple words : , if it was a div , then
style="border:solid 1px red;background-color:white")
How can I enhance my code to do that by not filling the whole shape ? Is there any property which allows me to do this ?
A simple workaround for this is to draw 2 arcs: One red with a
lineWidth of 10 and then another one on top in white and a
lineWidth of 6 or 8.
Note: Odd numbers might yield better results (11 and 9/7):
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var radius = 55; var y = canvas.height / 2; context.beginPath(); var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var delta = 0.005 * Math.PI; context.arc(x, y, radius, startAngle, endAngle , false); context.lineWidth = 11; context.strokeStyle = 'red'; context.stroke(); context.beginPath(); context.arc(x, y, radius, startAngle+delta, endAngle-delta, false); context.lineWidth = 9; context.strokeStyle = 'white'; context.stroke();
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.