HTML Canvas Tutorial: Drawing with <canvas> and JavaScript

The HTML <canvas> element provides a bitmap drawing surface. JavaScript gets a drawing context from that element and uses the Canvas API to draw lines, rectangles, arcs, text, images, charts, animations and other graphics.

For 2D graphics, the basic pattern is: add a canvas with explicit width and height, select it in JavaScript, call getContext('2d'), and then use methods such as fillRect(), lineTo() or arc().

Basic HTML Canvas example Top ↑

<canvas id="my_canvas" width="500" height="200">
  Your browser does not support the canvas element.
</canvas>

<script>
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#0d6efd';
ctx.fillRect(20, 20, 160, 80);
</script>

Canvas width, height and coordinate system Top ↑

The canvas coordinate system starts at the top-left corner. The X coordinate increases from left to right and the Y coordinate increases from top to bottom.

• X = 0, Y = 0 is the top-left corner.
• The width and height HTML attributes define the drawing surface dimensions. If omitted, the default canvas size is 300 by 150.
• Use CSS to control how the element fits the page, but do not rely on CSS width and height alone to define the drawing buffer because scaling can distort or blur the drawing.
• Changing the canvas width or height after drawing resets the drawing surface and the rendering state.

Getting the 2D drawing context Top ↑

const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

if (ctx) {
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 120, 60);
}

getContext('2d') returns a CanvasRenderingContext2D object when the 2D context is available. The drawing methods and properties used throughout this tutorial are called on that context object.

Adding a visible border around the canvas Top ↑

A canvas is transparent by default, so a border can make its dimensions easier to see while learning.

<canvas id="my_canvas"
        width="500"
        height="200"
        style="border:1px solid #000;max-width:100%;height:auto;"></canvas>

Drawing lines and paths Top ↑

A typical line begins with a path, moves to a starting coordinate, adds one or more line segments, and then strokes the path.

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(220, 100);
ctx.lineWidth = 4;
ctx.strokeStyle = '#333';
ctx.stroke();

Try the line drawing demo | Marching ants dashed-border animation

Drawing rectangles Top ↑

Try the rectangle demo

Drawing arcs, circles and curves Top ↑

ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.stroke();

For arc(x, y, radius, startAngle, endAngle, counterclockwise), angles are measured in radians. A full circle runs through Math.PI * 2 radians.

Try the arc and circle demo | Change arc start and end angles

Adding text to Canvas Top ↑

Try the Canvas text demo

Colors, fills and gradients Top ↑

Adding shadows Top ↑

Canvas shadow demo | Interactive shadow demo

Rotate, translate and transform Canvas drawings Top ↑

Transformations change the drawing coordinate system for operations that follow them. Use save() and restore() when you want a transformation to affect only part of a drawing.

rotate() | translate() | transform()

Canvas graphs, curves and practical projects Top ↑

After learning the drawing primitives, these existing examples show how they can be combined into larger graphics:

• Analog clock on Canvas
• Bar graph and stacked bar graph
• Pie chart
• Line graph
• Arc graph
• Sine curve, cosine curve, and combined sine and cosine curves

Mouse and pointer interaction Top ↑

Canvas drawings are pixels rather than individual DOM elements, so interaction usually requires listening for events on the canvas and translating pointer coordinates into the drawing's coordinate system.

See mouse coordinates and events on Canvas and JavaScript events.

Do you need jQuery for Canvas? Top ↑

No. Canvas is a browser API and works directly with JavaScript. Older examples may use jQuery to select the canvas element, but native DOM methods are sufficient:

const canvas = document.querySelector('#my_canvas');
const ctx = canvas.getContext('2d');

The older jQuery approach remains possible, but there is normally no benefit to loading jQuery only to access the canvas element. See the existing Canvas JavaScript and jQuery comparison.

Canvas accessibility Top ↑

Graphics drawn into Canvas are pixels and do not automatically provide the same semantic structure as HTML elements. Do not use Canvas as the only representation of important text, controls or data.

• Provide useful fallback content between the opening and closing <canvas> tags when appropriate.
• For charts and data visualizations, provide the important values or conclusions in accessible HTML as well.
• For interactive Canvas applications, provide keyboard-operable controls and an accessible alternative for essential tasks.
• Use meaningful nearby text when a drawing communicates information the reader needs to understand.

Common Canvas mistakes Top ↑

• Trying to draw with HTML alone. The <canvas> element creates the surface; JavaScript performs the drawing.
• Setting only CSS dimensions and unintentionally stretching the bitmap.
• Forgetting beginPath() when starting an independent path and accidentally connecting shapes.
• Calling path-building methods such as lineTo() but forgetting stroke() or fill().
• Using Canvas for ordinary page text or controls that should be semantic HTML.
• Assuming pixels drawn on Canvas become searchable DOM elements.

Frequently asked questions Top ↑

What is the HTML Canvas element used for? Top ↑

It provides a drawing surface that scripts can use for 2D graphics, charts, games, animations, image processing and other pixel-based graphics.

Does Canvas require JavaScript? Top ↑

For normal dynamic drawing, yes. HTML creates the canvas element, while JavaScript calls the Canvas API to draw into it.

What does getContext('2d') do? Top ↑

It requests the canvas 2D rendering context. That object provides the methods and properties used to draw shapes, paths, text and images.

What are the default Canvas dimensions? Top ↑

If the width and height attributes are omitted, the default drawing surface is 300 pixels wide and 150 pixels high.

Is Canvas a replacement for SVG or normal HTML? Top ↑

No. Canvas is useful for pixel-based and frequently redrawn graphics. SVG is often better for scalable vector graphics, while normal HTML should be used for semantic text, links, forms and page structure.

Continue learning HTML Canvas Top ↑

fillRect() | moveTo() | lineTo() | arc() | setLineDash() | fillStyle

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: