Function drawCircle
- drawCircle(
context: CanvasRenderingContext2D,
x: number,
y: number,
r: number,
drawOptions?: DrawOptions,
): void Draws a circle on the provided canvas context.
Supports two different signatures:
(context, x, y, r, drawOptions)(context, { x, y, r }, drawOptions)
Example
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
const context = canvas.getContext('2d')!;
// Using individual arguments
drawCircle(context, 100, 100, 50, {
fillColor: 'blue',
strokeColor: 'black',
lineWidth: 2,
});
// Using an object for the circle
drawCircle(context, { x: 200, y: 200, r: 75 }, {
strokeColor: 'green',
dashed: true,
dashPattern: [10, 5],
fill: false,
});
Parameters
- context: CanvasRenderingContext2D
The canvas rendering context.
- x: number
The x-coordinate of the circle's center.
- y: number
The y-coordinate of the circle's center.
- r: number
The radius of the circle.
OptionaldrawOptions: DrawOptionsOptions for customizing the appearance of the circle.
Returns void
- drawCircle(
context: CanvasRenderingContext2D,
circle: I_Circle,
drawOptions?: DrawOptions,
): void Draws a circle on the provided canvas context using an object for the circle's dimensions.
Parameters
- context: CanvasRenderingContext2D
The canvas rendering context.
- circle: I_Circle
The circle dimensions (
x,y, andr). OptionaldrawOptions: DrawOptionsOptions for customizing the appearance of the circle.
Returns void
- context: CanvasRenderingContext2D
Implementation of the
drawCirclefunction. Determines which signature is being used and applies the appropriate logic.