Canvas Shapes

HTML5 Canvas Shapes Overview

HTML5 Canvas allows developers to draw shapes, lines, paths, text, images, charts, games, and animations directly in the browser using JavaScript. The Canvas API provides a pixel-based drawing surface that is useful for graphics-heavy applications, data visualizations, image editing tools, and interactive UI experiences.

Canvas shapes are created using the 2D rendering context. Developers can draw rectangles, lines, circles, arcs, triangles, polygons, curves, and custom paths by combining Canvas methods such as fillRect(), strokeRect(), beginPath(), moveTo(), lineTo(), arc(), and stroke().

Basic Canvas Shapes Example

<canvas
  id="shapeCanvas"
  width="500"
  height="300">
  Your browser does not support canvas.
</canvas>

<script>
  const canvas = document.querySelector("#shapeCanvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(40, 40, 120, 80);

  ctx.strokeStyle = "red";
  ctx.lineWidth = 4;
  ctx.strokeRect(200, 40, 120, 80);

  ctx.beginPath();
  ctx.arc(120, 200, 50, 0, Math.PI * 2);
  ctx.fillStyle = "green";
  ctx.fill();
</script>

This example draws a filled rectangle, an outlined rectangle, and a circle using the Canvas 2D context. Each shape is controlled using coordinates, dimensions, colors, and drawing methods.

Canvas Shape Methods

The Canvas API provides several built-in methods for drawing basic and custom shapes. Rectangles have shortcut methods, while circles, triangles, and complex shapes are created using paths.

Common Canvas Shape Examples

Draw Triangle with Canvas

// Draw a triangle with Canvas

const canvas = document.querySelector("#shapeCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 40);
ctx.lineTo(40, 140);
ctx.lineTo(160, 140);
ctx.closePath();

ctx.fillStyle = "orange";
ctx.fill();

ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.stroke();

A triangle is created by starting a path, moving to the first point, drawing lines to the next points, closing the path, and then filling or stroking the shape.

Draw Circle with Canvas

// Draw a circle with Canvas

const canvas = document.querySelector("#shapeCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(150, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = "purple";
ctx.fill();

ctx.strokeStyle = "black";
ctx.lineWidth = 4;
ctx.stroke();

The arc() method creates a circular path. A full circle uses a start angle of 0 and an end angle of Math.PI * 2.

Canvas Shape Styling

Canvas shapes can be styled using fill colors, stroke colors, line widths, shadows, gradients, and transparency.

Canvas Shapes Best Practices

• Always check that the canvas context is available before drawing.
• Use beginPath() before creating a new custom shape.
• Use closePath() when drawing closed shapes like triangles and polygons.
• Separate drawing logic into reusable functions.
• Clear the canvas before redrawing animations or dynamic shapes.
• Use semantic HTML or ARIA alternatives when canvas content is meaningful.
• Scale canvas correctly for high-DPI screens.
• Optimize drawing operations for performance-heavy graphics.

Common Canvas Shape Mistakes

• Forgetting to call beginPath() before drawing a new shape.
• Not closing paths for polygons or triangles.
• Using incorrect coordinates or canvas dimensions.
• Drawing before the canvas element is available in the DOM.
• Forgetting that canvas is pixel-based and does not create DOM elements for shapes.
• Ignoring accessibility for important canvas content.
• Not clearing the canvas before redrawing animated scenes.
• Using canvas for simple UI elements that could be built with HTML and CSS.

Key Takeaways

• HTML5 Canvas draws shapes using JavaScript and the 2D context.
• Rectangles can be drawn using fillRect() and strokeRect().
• Custom shapes use paths with beginPath(), moveTo(), and lineTo().
• Circles and arcs are drawn using arc().
• Canvas shapes can be filled, stroked, styled, animated, and cleared.
• Canvas is powerful for graphics but needs extra accessibility support for meaningful content.