Skip to content


Download (cdnjs)
// Import jQuery and core jCanvas library first
import $ from 'jquery';
import 'jcanvas';
// UMD import
import 'jcanvas/dist/umd/jcanvas-donuts.min.js';
// ESM import
import 'jcanvas/dist/esm/jcanvas-donuts.min.js';

This plugin draws a donut shape using the provided drawDonut() method.

This plugin adds a special holeSize property, which is a multiple of the donut’s diameter, and determines the diameter of the donut hole. The default value is 0.5.

fillStyle: '#633',
x: 100,
y: 100,
radius: 50,
// Set the hole's diameter to 40% of the donut's diameter
holeSize: 0.4