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.

<text x="10" y="20">Hello SVG</text>

Container for reusable SVG definitions like gradients.

<defs>
    <linearGradient id="grad1">...</linearGradient>
</defs>

Reuses an existing SVG element defined in <defs>.

<use href="#shape1" />

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