The HTML5 Canvas API is the web technology that makes browser-based drawing tools possible, providing a programmable 2D drawing surface that can render graphics, animations, and interactive content without plugins. Introduced as part of the HTML5 specification, the Canvas element gives JavaScript direct access to a pixel-based drawing surface through a rich API of drawing commands.

Rasterization is the core process by which the Canvas API converts geometric descriptions (lines, curves, shapes) into pixels on the screen. When you draw a line from point A to point B, the browser must determine which pixels should be colored to represent that line. For horizontal and vertical lines this is trivial, but diagonal lines require algorithms like Bresenham's line algorithm, which efficiently selects the pixels that best approximate the mathematical line while using only integer arithmetic. Anti-aliasing techniques smooth the jagged staircase effect (aliasing) on diagonal and curved edges by partially coloring pixels at boundaries, creating the illusion of smooth lines at the sub-pixel level.

The distinction between vector and raster drawing is fundamental to understanding digital graphics. Vector graphics describe shapes mathematically using geometric primitives like points, lines, and curves. A circle is stored as a center point and radius, not as a collection of pixels. This means vector graphics can be scaled to any size without quality loss. Raster graphics store images as a grid of pixels with specific color values. The Canvas API operates in raster mode: once you draw a shape, it becomes pixels and loses its identity as a geometric object. This is why canvas drawings cannot be easily edited after the fact (you cannot select and move a previously drawn circle), unlike vector-based tools like SVG.

Bezier curves are the mathematical foundation for smooth curve drawing in computer graphics. Named after French engineer Pierre Bezier who used them in automobile body design at Renault in the 1960s, Bezier curves are defined by control points that influence the curve shape without the curve necessarily passing through them. Quadratic Bezier curves use three control points (start, control, end) and can represent simple curves like arcs. Cubic Bezier curves use four control points (start, two controls, end) and can represent more complex S-curves and compound curves. The Canvas API provides both quadraticCurveTo() and bezierCurveTo() methods. When you draw freehand on a canvas, the captured mouse or touch positions are often smoothed by fitting Bezier curves through the sampled points, producing fluid strokes rather than jagged polygons connecting raw input samples.