In a world of shaders, meshes, and filters, Canvas2D might not get you excited. But it should!
30–40% of web pages have a <canvas> element and 98% of all canvases use a Canvas2D rendering
context. There are Canvas2Ds in cars, on fridges,
and in space (really).
Admittedly, the API is a bit behind the times when it comes to state-of-the-art 2D drawing. Fortunately we've been hard at work implementing new features in Canvas2D to catch up to CSS, streamline ergonomics and improve performance.
Part 1: catching up with CSS
CSS has a few drawing commands that are sorely missing from Canvas2D. With the new API we've added a handful of the most requested features:
Round rect
Rounded rectangles: the cornerstone of the internet, of computing, nigh, of civilization.
In all seriousness, rounded rectangles are extremely useful: as buttons, chat bubbles, thumbnails, speech bubbles, you name it. It's always been possible to make a rounded rectangle in Canvas2D, it's just been a bit messy:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'magenta';
const top = 10;
const left = 10;
const width = 200;
const height = 100;
const radius = 20;
ctx.beginPath();
ctx.moveTo(left + radius, top);
ctx.lineTo(left + width - radius, top);
ctx.arcTo(left + width, top, left + width, top + radius, radius);
ctx.lineTo(left + width, top + height - radius);
ctx.arcTo(left + width, top + height, left + width - radius, top + height, radius);
ctx.lineTo(left + radius, top + height);
ctx.arcTo(left, top + height, left, top + height - radius, radius);
ctx.lineTo(left, top + radius);
ctx.arcTo(left, top, left + radius, top, radius);
ctx.stroke();
All this was necessary for a modest, simple rounded rectangle: