CODEWITHSUNDEEP
javascripthtmlhtml5-canvasdrawing
RHLK
RHLK

Reputation: 347

Canvas : Stripped region between two concentric circles

Any work around solution for having a shaded region inside two concentric circles drawn in HTML 5 ?. Pls find the reference image below

Concentric Circles

Upvotes: 0

Views: 918

Answers (1)

markE
markE

Reputation: 105015

A bit of trigonometry satisfies your need.

Use Trigonometry to calculate a line segment radiating from the circles' centerpoint and passing through the compliment of the circles. (compliment==outer circle minus inner circle).

// set an angle at which to radiate the line segment
// The angle is in radians
var angle=Math.PI/20;

// calculate the line segment's starting point
// on the inside circle
var x0=centerX+insideRadius*Math.cos(angle);
var y0=centerY+insideRadius*Math.sin(angle);

// calculate the line segment's ending point
// on the outside circle
var x1=centerX+outsideRadius*Math.cos(angle);
var y1=centerY+outsideRadius*Math.sin(angle);

enter image description here

Here's example code and a demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var PI=Math.PI;
var PI2=PI*2;
var cx=150;
var cy=150;
var radius=100;
var tickCount=50;
var currentTick=0;
var circleStrokeWidth=20;

ctx.lineWidth=circleStrokeWidth;
ctx.strokeStyle='lightgray';

ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
ctx.stroke();

var insideRadius=radius-circleStrokeWidth/2;
var outsideRadius=radius+circleStrokeWidth/2;

ctx.lineWidth=2;
ctx.strokeStyle='black';

for(var i=0;i<tickCount;i++){
  var angle=PI2/tickCount*i;
  var x0=cx+insideRadius*Math.cos(angle);
  var y0=cy+insideRadius*Math.sin(angle);
  var x1=cx+outsideRadius*Math.cos(angle);
  var y1=cy+outsideRadius*Math.sin(angle);
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.stroke();
}
body{ background-color: ivory; padding:20px; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 1

Related Questions