Есть ли возможность нарисовать на canvas «Бублик» с прозрачным центром?

Question

[Ne7Le4Der]

Чтобы было видно фон блока под канвасом. Или только круг-подложка + круг поверх, с другим цветом?

Answer 1

[Александр]

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const lineWidth = 60;
const radius = 200;

[canvas.width, canvas.height] = [radius * 2, radius * 2];
context.beginPath();
context.arc(radius, radius, radius - lineWidth / 2, 0, Math.PI * 2);
context.closePath();
context.lineWidth = lineWidth;
context.stroke();

document.body.append(canvas);