draw a circle in 2d html5 canvas
npm install ctx-circle
circle(ctx
, x
, y
, radius
[, reverse
])
ctx
- the CanvasRenderingContext2D to draw the circle onx
- the center of the circle in the x axisy
- the center of the circle in the y axisradius
- the radius of the circle to draw on the canvasreverse
- (optional, default false) whether or not to reverse the direction the circle is drawn in. This is good for holes and such using the canvas winding rules
Note: this module will not call ctx.beginPath
for you.
as seen in example.js
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var circle = require('ctx-circle');
document.body.appendChild(canvas);
canvas.width = 200;
canvas.height = 200;
ctx.beginPath()
circle(ctx, 100, 100, 50);
circle(ctx, 100, 100, 30, true);
ctx.strokeStyle = "red";
ctx.fillStyle = "orange";
ctx.fill();
ctx.stroke();
results in: