Skip to main content

circle

The circle() function draws a circular clipping region on a canvas context.

Parameters​

ParameterTypeDescription
ctxCanvasRenderingContext2DThe canvas rendering context to draw on.
xnumberThe x-coordinate of the center of the circle.
ynumberThe y-coordinate of the center of the circle.
widthnumberThe width of the clipping region.
heightnumberThe height of the clipping region.

Return value​

  • CanvasRenderingContext2D: The canvas context with the new circular clipping region.

Throws​

  • Error: Missing canvas context or invalid argument types.

Example​

const { createCanvas, loadImage } = require('canvas');
const utils = require('utils-core.js');
const canvas = createCanvas(500, 500);
const ctx = canvas.getContext('2d');

// Draw a circle clipping region in the center of the canvas
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) / 2;
ctx.save();
utils.canvas.circle(ctx, centerX - radius, centerY - radius, radius * 2, radius * 2);

// Draw an image that is clipped to the circle region
const image = await loadImage('myImage.png');
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.restore();
info

this example uses await to wait for the request which means the code has to be inside an async function.

See also​