Graphics

A drawing area for graphics via JavaScript (e.g., shapes, animations).

<canvas id="myCanvas" width="300" height="150"></canvas>

Draws 2D vector graphics using XML-like syntax.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
</svg>

SVG tag for drawing a circle. Used inside <svg>.

<circle cx="50" cy="50" r="40" fill="red" />

SVG tag for drawing rectangles. Used inside <svg>.

<rect width="100" height="80" fill="blue" />

SVG tag to draw a straight line.

<line x1="0" y1="0" x2="100" y2="100" stroke="black" />

SVG tag for connected lines.

<polyline points="0,0 50,50 100,0" fill="none" stroke="black" />

SVG tag for closed shapes.

<polygon points="200,10 250,190 160,210" fill="lime" stroke="purple" />

SVG tag for complex shapes and curves.

<path d="M150 0 L75 200 L225 200 Z" />

SVG tag for rendering text within SVG graphics.

Container for reusable SVG definitions like gradients.

Reuses an existing SVG element defined in <defs>.

canvas vs svg

Type

Raster (pixel-based)

Vector (math-based shapes)

API

JavaScript drawing (imperative)

Markup-based (declarative)

Use case

Games, animations, image editing

Icons, charts, responsive graphics

Performance

Faster for complex, dynamic scenes

Better for static, scalable shapes

PreviousLayoutsNextShortHands

Last updated