HTML5 Canvas: Drawing Shapes

Learn the fundamentals of the <canvas> element and how to draw basic shapes like rectangles, circles, lines, and paths using JavaScript.

Understanding the Canvas Element

The <canvas> element is a container for graphics. It's essentially a bitmap surface where you can draw using JavaScript. Unlike other HTML elements, the <canvas> element doesn't have any drawing capabilities of its own. You need to use JavaScript to draw on the canvas.

Basic Canvas Setup

First, you'll need to add the <canvas> element to your HTML:

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

Important attributes:

• id: A unique identifier for the canvas, allowing you to access it with JavaScript.
• width: The width of the canvas in pixels.
• height: The height of the canvas in pixels.
• Fallback content: The text "Your browser does not support the canvas element." is displayed if the browser doesn't support canvas.

Drawing with JavaScript

To draw on the canvas, you need to use JavaScript to get the 2D rendering context. This context provides the functions for drawing shapes, applying styles, and manipulating the canvas.

Getting the 2D Rendering Context

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

if (ctx) {
  // Drawing code goes here
} else {
  console.error('Canvas context not supported!');
} 

Drawing Rectangles

The fillRect(), strokeRect(), and clearRect() methods are used to draw rectangles.

// Filled rectangle
ctx.fillStyle = 'red'; // Set fill color
ctx.fillRect(10, 10, 100, 50); // x, y, width, height

// Stroked rectangle
ctx.strokeStyle = 'blue'; // Set stroke color
ctx.lineWidth = 5;       // Set line width
ctx.strokeRect(150, 10, 100, 50); // x, y, width, height

// Clear a rectangle area
ctx.clearRect(290, 10, 100, 50); // x, y, width, height 

Drawing Circles/Arcs

The arc() method is used to draw circles and arcs.

ctx.beginPath(); // Start a new path
ctx.arc(50, 100, 30, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'green';
ctx.fill();
ctx.closePath(); // Close the path

ctx.beginPath();
ctx.arc(150, 100, 30, 0, Math.PI); // Half circle
ctx.strokeStyle = 'purple';
ctx.stroke();
ctx.closePath(); 

Drawing Lines

Lines are drawn using paths. You start a new path, move to a starting point, draw a line to an ending point, and then stroke the path.

ctx.beginPath();
ctx.moveTo(10, 160); // Starting point
ctx.lineTo(100, 160); // Ending point
ctx.lineTo(100, 190);
ctx.lineTo(10,190);
ctx.closePath();
ctx.fillStyle = "orange";
ctx.fill();
ctx.strokeStyle = 'black';
ctx.stroke(); 

Drawing Paths

Paths are sequences of lines, arcs, and curves that can be filled or stroked. You can define complex shapes using paths.

ctx.beginPath();
ctx.moveTo(200, 160);
ctx.quadraticCurveTo(250, 120, 300, 160); // Control point, ending point
ctx.lineTo(300,190);
ctx.quadraticCurveTo(250, 150, 200, 190);
ctx.closePath();
ctx.fillStyle = 'brown';
ctx.fill();
ctx.strokeStyle = 'darkblue';
ctx.stroke(); 

Key Concepts

• beginPath(): Starts a new path. Always call this before drawing a new shape.
• closePath(): Connects the last point of the path back to the starting point, creating a closed shape.
• moveTo(x, y): Moves the drawing cursor to the specified coordinates.
• lineTo(x, y): Draws a line from the current position to the specified coordinates.
• fillStyle: Sets the color or pattern used to fill shapes.
• strokeStyle: Sets the color or pattern used to stroke shapes.
• lineWidth: Sets the width of lines.
• fill(): Fills the current path with the fill style.
• stroke(): Strokes the current path with the stroke style.