2D Drawing on the Web: Basics, Techniques, and Performance Optimizations

Early browsers lacked native 2D drawing capabilities, so developers relied on Flash; with the widespread adoption of HTML5, SVG and Canvas are now universally supported across browsers, mini‑programs, and Node environments.

The two dominant low‑level technologies for web 2D rendering are Canvas and SVG. Most 2D engines (e.g., zrender, paperjs, raphael.js) are built on them, while WebGL—originally for 3D—can also render 2D graphics such as those produced by pixijs.

SVG is an XML‑based vector format that scales without loss of quality, supports built‑in animation and filters, and integrates well with frameworks like React and Vue.

<svg width="300" height="300"></code><code>    <circle cx="50" cy="50" r="10" fill="#000" stroke="red" stroke-width="1" /></code><code></svg>

Canvas is an HTML5 element that provides a pixel‑based drawing API. Compared with SVG, Canvas offers finer control over pixels and generally better performance for large‑scale data rendering.

// 用canvas画一个圆</code><code>const ctx = canvas.getContext('2d')</code><code>ctx.beginPath()</code><code>ctx.arc(50, 50, 10, 0, Math.PI * 2)</code><code>ctx.fillStyle = '#000'</code><code>ctx.strokeStyle = 'red'</code><code>ctx.fill()</code><code>ctx.stroke()

WebGL can draw 2D shapes by first triangulating them and then rendering the triangles. Simple geometry is easy to triangulate, but complex shapes with holes require more sophisticated algorithms.

float myCircleSDF( in vec2 p, in float r ) </code><code>{</code><code>    return length(p)-r;</code><code>}

Both SVG and Canvas support path‑based drawing. SVG uses the path element with commands (M, L, C, etc.), while Canvas provides analogous methods (moveTo, lineTo, bezierCurveTo, etc.).

canvas

svg path

moveTo

m, M

lineTo

L, l

bezierCurveTo

c, C, S, s

quadraticCurveTo

Q, q, T, t

arc & ellipse

A, a

closePath

z, Z

rect

-

SVG elements are regular DOM nodes, so they can listen to events directly. Canvas, being a single bitmap, requires manual hit‑testing; common approaches are geometric picking (math‑based) and pixel picking (off‑screen rendering with color IDs).

function isPointInCirlce(cx, cy, r, x, y) {</code><code>    return (x -cx ) ** 2 + (y - cy) ** 2 < r ** 2</code><code>}

Animation on the web is driven by requestAnimationFrame. Animations can be classified as property animation, path animation, or deformation animation, often using easing functions from libraries such as Tween.js.

Rendering performance tips include minimizing context state changes (set style once for many shapes) and culling off‑screen objects.

// 绘制1000个相同样式的矩形, 只设置一次上下文</code><code>ctx.save()</code><code>ctx.strokeStyle = color</code><code>ctx.lineWidth = 1</code><code>for (let i = 0; i < 1000; i++) {</code><code>    ctx.strokeRect(x, y, width, height)</code><code>}</code><code>ctx.restore

Other techniques are dirty‑rectangle rendering, layer caching (or cacheAsBitmap), splitting large scenes into multiple frames, and using OffscreenCanvas with Web Workers for tile‑based rendering.

Picking performance can be improved by first testing bounding boxes, caching transformation matrices, and employing spatial indexes such as R‑trees to accelerate hit‑testing.