If you’re working with canvas shapes and want the messy part simplified, this kirupa guide on drawing shapes with functions is a solid shortcut.
It keeps the examples practical and easy to adapt, which is honestly the part most tutorials skip.
1 Like
One small thing that changed canvas for me was treating every “shape function” as drawing at the origin, then positioning it with ctx. save(), ctx. translate(), and ctx. restore() around the call. It keeps your shape code readable because you’re not sprinkling offsets into every moveTo/lineTo.
function drawBadge(ctx) {
ctx.beginPath();
ctx.moveTo(0, -10);
ctx.lineTo(8, 10);
ctx.lineTo(-8, 10);
ctx.closePath();
ctx.fill();
}
ctx.save();
ctx.translate(x, y);
drawBadge(ctx);
ctx.restore();
Do they show the save/restore pattern in that guide, or is it mostly direct transform calls? I always worry people forget to reset the matrix, and everything slowly drifts.
