HTML Canvas Graphics

The HTML <canvas> element lets you draw graphics on a web page using JavaScript. You can draw shapes, text, images, and even create animations.

What is HTML Canvas?

The <canvas> element is just a container. Think of it like a blank piece of paper. To actually draw something, you need JavaScript.

Canvas is supported by all modern browsers. It works on Chrome, Firefox, Safari, and Edge.

Basic Canvas Setup

A canvas is a rectangular area on your page. By default, it is invisible with no border. You need to give it an id so JavaScript can find it, and set width and height to define its size.

Drawing a Line

To draw anything on canvas, you need to get the canvas element and its “context”. The context has all the drawing methods. moveTo() sets the starting point. lineTo() sets the ending point. stroke() draws the line.

Drawing a Circle

Use arc() to draw a circle. The parameters are: x position, y position, radius, start angle, end angle. Math.PI * 2 makes a full circle.

Drawing a Rectangle

Use fillRect() to draw a filled rectangle. The parameters are: x position, y position, width, height.

Drawing Text

Use fillText() to draw filled text. You can set the font and color before drawing.

You can also draw text with just an outline using strokeText():

Linear Gradient

A gradient is a smooth transition between colors. createLinearGradient() creates a linear gradient along a line.

Radial Gradient

createRadialGradient() creates a gradient that radiates from a center point, like a circle.

Drawing an Image on Canvas

You can draw an existing image onto the canvas using drawImage(). The image must be loaded first.

Complete Example: Drawing Multiple Shapes

Here is a complete example combining everything we learned:

Quick Summary

• <canvas> is a container for graphics. You need JavaScript to draw.
• Always set id, width, and height on the canvas.
• Use getContext("2d") to get the drawing tool.
• moveTo() and lineTo() draw lines. stroke() makes them visible.
• arc() draws circles and arcs.
• fillRect() draws rectangles. fillStyle sets the color.
• fillText() draws text. font and fillStyle control appearance.
• Gradients are created with createLinearGradient() or createRadialGradient().
• drawImage() places an image on the canvas.

What Just Happened? Let Me Explain

• The canvas is like a blank digital paper. You tell JavaScript what to draw on it.
• The “context” (getContext("2d")) is your pencil. It has all the drawing commands.
• Everything you draw stays on the canvas. To clear it, you can redraw the whole thing or use clearRect().
• Canvas drawings are pixel-based. They do not scale up nicely like SVG, but they are great for games, charts, and image editing.
• The order of drawing matters. Later drawings appear on top of earlier ones.

HTML Canvas Reference