ctx-circle

draw a circle in 2d html5 canvas

install

npm install ctx-circle

use

api

circle(ctx, x, y, radius[, reverse])

• ctx - the CanvasRenderingContext2D to draw the circle on
• x - the center of the circle in the x axis
• y - the center of the circle in the y axis
• radius - the radius of the circle to draw on the canvas
• reverse - (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.

example

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:

license

MIT