在html5画布中创建非填充弧？

Question

(simplified) : I've have created this simple code to create an arc

jsbin

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" )

question :

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 ?

Answer 1

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();

jsbin