CODEWITHSUNDEEP
javascripthtmlcanvasdonut-chart
zbeyens
zbeyens

Reputation: 321

HTML5 Canvas - Draw an annular sector

I would like to draw edges of a game map (10000x10000) with an annular shape (so the map would be round). The simplest (but the worst in term of performance) way is to draw a filling circle (radius of 6000) and an unfilling circle (radius of 5000).

The player has a small viewport, then it is not necessary to draw a whole annular. A sector is fine.

I tried with ctx.arc, but it gives me a chord...

is there an efficient way to draw a huge annular sector on canvas2D ?

enter image description here

Upvotes: 0

Views: 1221

Answers (1)

markE
markE

Reputation: 105035

Your shape is a stroked arc:

enter image description here

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var strokewidth=100;
var cx=cw/2;
var cy=ch/2;
var PI=Math.PI;
var radius=Math.min(cw,ch)/2-strokewidth/2;
ctx.lineWidth=strokewidth;
ctx.lineCap='butt';
ctx.beginPath();
ctx.arc(cx,cy,radius,-PI*3/4,-PI/16);
ctx.strokeStyle='mediumVioletRed';
ctx.stroke();
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=378 height=378></canvas>

An Aside: Redrawing a 10K x 10K canvas will be your main (and huge) performance hit. You probably should refactor your design to avoid extremely large canvases.

Upvotes: 6

Related Questions