fillRect(x, y, width, height)
Draws a filled rectangle. Position starts at (x, y) with specified width and height.
strokeRect(x, y, width, height)
Draws a rectangle outline (stroke only, no fill). Uses strokeStyle and lineWidth.
clearRect(x, y, width, height)
Clears pixels in a rectangle to transparent. Here we first fill the canvas, then use clearRect to create a "hole".
Paths: moveTo, lineTo
Build paths with beginPath(), moveTo(x, y), and lineTo(x, y). Render with stroke() or fill(). Use closePath() to connect back to start.
quadraticCurveTo(cpx, cpy, x, y)
Adds a quadratic Bezier curve with one control point. The curve is pulled toward the control point (shown in orange).
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Adds a cubic Bezier curve with two control points. The curve starts toward cp1 (orange) and ends coming from cp2 (pink).
arc(x, y, radius, startAngle, endAngle, ccw)
Adds a circular arc to the path. Angles are in radians (displayed in degrees here). Toggle counterclockwise direction.
arcTo(x1, y1, x2, y2, radius)
Creates a rounded corner. The arc connects from the current point, tangent to the lines formed by (current→p1) and (p1→p2).
ellipse(x, y, rx, ry, rotation, start, end)
Adds an elliptical arc. Specify center, x/y radii, rotation angle, and start/end angles.
rect(x, y, width, height)
Adds a rectangle to the current path (unlike fillRect which draws immediately). Add multiple rectangles to one path, then fill/stroke them all together.
roundRect(x, y, width, height, radii)
Adds a rounded rectangle to the path. The radii parameter controls corner rounding.
fillText / strokeText
Draw text with fillText(text, x, y) or strokeText(text, x, y). Style with font, textAlign, textBaseline. Crosshairs show the anchor point.