Introduction

The HTML5 <canvas> element provides a powerful and flexible way to draw graphics and create interactive applications. This section will guide you through the fundamental concepts and techniques needed to master canvas-based development.

You will learn how to set up a canvas, draw shapes, work with images, create animations, handle user interactions, apply transformations, and render text. We will also cover some advanced techniques and provide project examples to help you get started.

Setting Up the Canvas

To start using the canvas, you need to set up the HTML and JavaScript. This section covers the basics of creating a canvas element and accessing its context.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Setup</title>
</head>
<body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>
Canvas Parameters
  • idA unique identifier for the canvas element.
  • widthThe width of the canvas in pixels.
  • heightThe height of the canvas in pixels.
  • getContext('2d')Retrieves the 2D drawing context for the canvas, providing methods and properties for drawing and manipulating graphics.
script.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Drawing Shapes

Learn how to draw basic shapes like rectangles, circles, and lines on the canvas.

drawing-shapes.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);

// Draw a circle
ctx.beginPath();
ctx.arc(300, 150, 75, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
Best Practices for Drawing Shapes
  • Use beginPath() and closePath() to define separate paths.
  • Set the fillStyle or strokeStyle before drawing.
  • Clear the canvas using clearRect() before redrawing in animations.

Working with Images

This section explains how to load and draw images onto the canvas.

working-with-images.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = () => {
    ctx.drawImage(image, 50, 50);
};
Image Parameters
  • srcThe source URL of the image.
  • drawImage(image, dx, dy)Draws the image onto the canvas at the specified coordinates.

Animations

Create smooth animations using the canvas and requestAnimationFrame.

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

let x = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 100, 100);
    x += 1;
    requestAnimationFrame(animate);
}
animate();
Best Practices for Animations
  • Use requestAnimationFrame for smoother animations and better performance.
  • Clear the canvas before redrawing using clearRect().
  • Keep animation logic separate from drawing logic.

Event Handling

Learn how to handle user interactions like mouse clicks and movements on the canvas.

event-handling.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    ctx.fillRect(x, y, 10, 10);
});
Best Practices for Event Handling
  • Use getBoundingClientRect() to get the canvas position relative to the viewport.
  • Use event listeners like mousedown, mouseup, and mousemove for interaction.

Transformations

Apply transformations like translation, rotation, and scaling to the canvas context.

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

// Translate
ctx.translate(100, 100);

// Rotate
ctx.rotate(Math.PI / 4);

// Draw a rectangle
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 100, 50);
Transformation Methods
  • translate(x, y)Moves the canvas origin to (x, y).
  • rotate(angle)Rotates the canvas by the specified angle in radians.
  • scale(x, y)Scales the canvas by (x, y).

Text Rendering

Learn how to render and style text on the canvas.

text-rendering.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw text
ctx.font = '30px Arial';
ctx.fillStyle = 'purple';
ctx.fillText('Hello Canvas', 50, 50);
Text Rendering Properties
  • fontSets the current text style.
  • fillStyleSets the color for filling text.
  • fillText(text, x, y)Draws the filled text at the specified coordinates.

Advanced Techniques

Explore advanced canvas techniques like using shadows, gradients, and compositing.

advanced-techniques.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Shadows
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = 'orange';
ctx.fillRect(100, 100, 150, 100);

// Gradients
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(300, 100, 200, 100);
Advanced Techniques
  • ShadowsUse properties like shadowColor, shadowBlur, shadowOffsetX, and shadowOffsetY to add shadows.
  • GradientsCreate linear or radial gradients using createLinearGradient or createRadialGradient.

Simple Drawing App

Build a simple drawing application using the canvas element.

simple-drawing-app.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let drawing = false;

canvas.addEventListener('mousedown', () => {
    drawing = true;
});

canvas.addEventListener('mouseup', () => {
    drawing = false;
    ctx.beginPath();
});

canvas.addEventListener('mousemove', draw);

function draw(event) {
    if (!drawing) return;

    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';

    ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
Features of Simple Drawing App
  • Handles mouse events to draw on the canvas.
  • Uses lineTo and stroke methods to draw lines.
  • Resets path with beginPath on mouseup.

Game Development

Create a basic game using the canvas element.

game-development.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let player = {
    x: 50,
    y: 50,
    width: 50,
    height: 50,
    color: 'blue',
    dx: 2,
    dy: 2
};

function drawPlayer() {
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    player.x += player.dx;
    player.y += player.dy;

    if (player.x + player.width > canvas.width || player.x < 0) {
        player.dx *= -1;
    }
    if (player.y + player.height > canvas.height || player.y < 0) {
        player.dy *= -1;
    }

    requestAnimationFrame(update);
}

update();
Game Development Tips
  • Use requestAnimationFrame for the game loop.
  • Clear the canvas using clearRect before each frame.
  • Update object positions and check for collisions.

Interactive Graph

Build an interactive graph using the canvas element.

interactive-graph.js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let points = [
    { x: 50, y: 300 },
    { x: 150, y: 200 },
    { x: 250, y: 250 },
    { x: 350, y: 150 },
    { x: 450, y: 100 },
    { x: 550, y: 200 }
];

canvas.addEventListener('mousemove', (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    points = points.map(point => ({
        x: point.x,
        y: point.y + (mouseY - point.y) * 0.05
    }));

    drawGraph();
});

function drawGraph() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    points.forEach(point => ctx.lineTo(point.x, point.y));
    ctx.strokeStyle = 'blue';
    ctx.stroke();
}

drawGraph();
Interactive Graph Tips
  • Use mouse events to interact with canvas elements.
  • Update the graph dynamically based on user input.
  • Use clearRect to clear the canvas before redrawing.
Q: What is the canvas element in HTML?

A: The HTML5 <canvas> element is a powerful and flexible way to draw graphics and create interactive applications. It provides a drawing surface that can be controlled with JavaScript.

Q: How do I set up a canvas?

A: To set up a canvas, create an HTML file with a <canvas> element and a corresponding JavaScript file to access the canvas context using getContext('2d').

Q: How do I draw shapes on the canvas?

A: You can draw shapes on the canvas using methods like fillRect for rectangles, arc for circles, and lineTo for lines. Set the fill style with fillStyle and stroke style with strokeStyle.

Q: How can I handle user interactions on the canvas?

A: Use event listeners such as mousedown, mouseup, and mousemove to handle user interactions. Access the mouse coordinates relative to the canvas using getBoundingClientRect.

Q: How do I create animations on the canvas?

A: Use the requestAnimationFrame method for creating smooth animations. Clear the canvas before redrawing using clearRect and update the animation logic in a loop.

Q: What are the best practices for working with the canvas?

A: Best practices include separating drawing logic from animation logic, clearing the canvas before each frame, using transformations for complex graphics, and optimizing performance with requestAnimationFrame.

Q: How do I work with images on the canvas?

A: Load images using the Image object and draw them on the canvas with drawImage. Ensure the image is fully loaded before drawing by using the onload event.

Table of Contents