Documentation
Learn all about jCanvasjCanvas
Canvas
- Clear Canvas
- Rotate Canvas
- Scale Canvas
- Translate Canvas
- Pixel Manipulation
- Get Canvas Image
- Draw Manually
- Detect Pixel Ratio
Drawings
Layers
Events
Styles
Arcs
An arc in jCanvas is, essentially, part of the rim of a circle (similar to the smile on a smiley-face).
Basic Usage
You can draw an arc using the drawArc()
method. The size of an arc is determined by its start
, end
, and radius
properties.
jCanvas considers zero degrees to lie due north of the arc (like the 12 on an analog clock).
// Draw a 90-degree arc
$('canvas').drawArc({
strokeStyle: '#000',
strokeWidth: 5,
x: 100, y: 100,
radius: 50,
// start and end angles in degrees
start: 0, end: 90
});
If you omit the start
and end
properties, the arc defaults to a full circle.
// Draw a full circle
$('canvas').drawArc({
strokeStyle: '#000',
strokeWidth: 5,
x: 100, y: 100,
radius: 50
});
Radian values
The start
and end
values are measured in degrees by default. If you’d prefer to use radians, include the inDegrees
property with a value of false
.
// Draw a black semicircle
$('canvas').drawArc({
fillStyle: 'black',
x: 100, y: 100,
radius: 50,
start: 0, end: Math.PI,
ccw: true,
inDegrees: false
});
Closed Arc
Using the closed
property, you can also close an arc, which connects the start and end points.
// Draw a closed red arc
$('canvas').drawArc({
strokeStyle: '#c33',
strokeWidth: 5,
x: 100, y: 100,
radius: 50,
start: 45, end: 225,
closed: true
});


