HTML Canvas Tutorial

Learn how to draw graphics and create animations using the HTML Canvas element

Introduction to HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page via JavaScript. It provides a powerful API for creating animations, games, data visualizations, and more.

Basic Syntax:

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 80);
</script><canvas id="myCanvas" width="200" height="100"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 80);
</script>

Basic Canvas Examples

1. Basic Canvas Drawing

Draw a simple rectangle on a canvas element.

<canvas id="myCanvas" width="300" height="120"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 100);
</script><canvas id="myCanvas" width="300" height="120"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 100);
</script>

2. Drawing Different Shapes

Draw rectangles, circles, and lines on a canvas.

<canvas id="shapesCanvas" width="450" height="120"></canvas>

<script>
  const canvas = document.getElementById('shapesCanvas');
  const ctx = canvas.getContext('2d');
  
  // Rectangle
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 80);
  
  // Circle
  ctx.beginPath();
  ctx.arc(200, 50, 40, 0, Math.PI * 2);
  ctx.fillStyle = '#10b981';
  ctx.fill();
  
  // Line
  ctx.beginPath();
  ctx.moveTo(300, 10);
  ctx.lineTo(400, 90);
  ctx.strokeStyle = '#ef4444';
  ctx.lineWidth = 5;
  ctx.stroke();
</script><canvas id="shapesCanvas" width="450" height="120"></canvas>

<script>
  const canvas = document.getElementById('shapesCanvas');
  const ctx = canvas.getContext('2d');
  
  // Rectangle
  ctx.fillStyle = '#4f46e5';
  ctx.fillRect(10, 10, 100, 80);
  
  // Circle
  ctx.beginPath();
  ctx.arc(200, 50, 40, 0, Math.PI * 2);
  ctx.fillStyle = '#10b981';
  ctx.fill();
  
  // Line
  ctx.beginPath();
  ctx.moveTo(300, 10);
  ctx.lineTo(400, 90);
  ctx.strokeStyle = '#ef4444';
  ctx.lineWidth = 5;
  ctx.stroke();
</script>

3. Drawing Text and Styles

Add text and apply different styles to your canvas drawings.

<canvas id="textCanvas" width="400" height="150"></canvas>

<script>
  const canvas = document.getElementById('textCanvas');
  const ctx = canvas.getContext('2d');
  
  // Background
  ctx.fillStyle = '#f3f4f6';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Text with shadow
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  ctx.shadowBlur = 5;
  ctx.shadowOffsetX = 3;
  ctx.shadowOffsetY = 3;
  ctx.font = '30px Arial';
  ctx.fillStyle = '#4f46e5';
  ctx.fillText('Hello Canvas!', 50, 50);
  
  // Styled text
  ctx.shadowColor = 'transparent';
  ctx.font = 'italic 24px Georgia';
  ctx.strokeStyle = '#ef4444';
  ctx.lineWidth = 2;
  ctx.strokeText('Styled Text', 50, 100);
  
  // Gradient text
  const gradient = ctx.createLinearGradient(0, 120, 300, 120);
  gradient.addColorStop(0, '#10b981');
  gradient.addColorStop(1, '#3b82f6');
  ctx.fillStyle = gradient;
  ctx.font = 'bold 28px Verdana';
  ctx.fillText('Gradient Text', 50, 140);
</script><canvas id="textCanvas" width="400" height="150"></canvas>

<script>
  const canvas = document.getElementById('textCanvas');
  const ctx = canvas.getContext('2d');
  
  // Background
  ctx.fillStyle = '#f3f4f6';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Text with shadow
  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  ctx.shadowBlur = 5;
  ctx.shadowOffsetX = 3;
  ctx.shadowOffsetY = 3;
  ctx.font = '30px Arial';
  ctx.fillStyle = '#4f46e5';
  ctx.fillText('Hello Canvas!', 50, 50);
  
  // Styled text
  ctx.shadowColor = 'transparent';
  ctx.font = 'italic 24px Georgia';
  ctx.strokeStyle = '#ef4444';
  ctx.lineWidth = 2;
  ctx.strokeText('Styled Text', 50, 100);
  
  // Gradient text
  const gradient = ctx.createLinearGradient(0, 120, 300, 120);
  gradient.addColorStop(0, '#10b981');
  gradient.addColorStop(1, '#3b82f6');
  ctx.fillStyle = gradient;
  ctx.font = 'bold 28px Verdana';
  ctx.fillText('Gradient Text', 50, 140);
</script>

Canvas Drawing Methods

Method	Description	Example
`fillRect(x, y, width, height)`	Draws a filled rectangle	`ctx.fillRect(10, 10, 100, 50);`
`strokeRect(x, y, width, height)`	Draws a rectangular outline	`ctx.strokeRect(10, 10, 100, 50);`
`clearRect(x, y, width, height)`	Clears the specified rectangular area	`ctx.clearRect(0, 0, canvas.width, canvas.height);`
`beginPath()`	Begins a new path	`ctx.beginPath();`
`moveTo(x, y)`	Moves the path to the specified point	`ctx.moveTo(10, 10);`
`lineTo(x, y)`	Adds a line to the path	`ctx.lineTo(100, 100);`
`arc(x, y, radius, startAngle, endAngle)`	Adds an arc to the path	`ctx.arc(50, 50, 40, 0, Math.PI * 2);`
`fill()`	Fills the current path	`ctx.fill();`
`stroke()`	Strokes the current path	`ctx.stroke();`
`fillText(text, x, y)`	Draws filled text	`ctx.fillText('Hello', 10, 50);`
`strokeText(text, x, y)`	Draws text outline	`ctx.strokeText('Hello', 10, 50);`

Advanced Canvas Techniques

1. Canvas Animation

Create smooth animations using requestAnimationFrame.

<canvas id="animationCanvas" width="400" height="100"></canvas>

<script>
  const canvas = document.getElementById('animationCanvas');
  const ctx = canvas.getContext('2d');
  let posX = 0;
  let speed = 2;
  
  function animate() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw circle
    ctx.beginPath();
    ctx.arc(posX, 50, 30, 0, Math.PI * 2);
    ctx.fillStyle = '#f59e0b';
    ctx.fill();
    
    // Update position
    posX += speed;
    
    // Reverse direction at edges
    if (posX > canvas.width || posX < 0) {
      speed = -speed;
    }
    
    // Continue animation
    requestAnimationFrame(animate);
  }
  
  // Start animation
  animate();
</script><canvas id="animationCanvas" width="400" height="100"></canvas>

<script>
  const canvas = document.getElementById('animationCanvas');
  const ctx = canvas.getContext('2d');
  let posX = 0;
  let speed = 2;
  
  function animate() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw circle
    ctx.beginPath();
    ctx.arc(posX, 50, 30, 0, Math.PI * 2);
    ctx.fillStyle = '#f59e0b';
    ctx.fill();
    
    // Update position
    posX += speed;
    
    // Reverse direction at edges
    if (posX > canvas.width || posX < 0) {
      speed = -speed;
    }
    
    // Continue animation
    requestAnimationFrame(animate);
  }
  
  // Start animation
  animate();
</script>

2. Image Manipulation

Load and manipulate images on canvas.

<canvas id="imageCanvas" width="300" height="200"></canvas>

<script>
  const canvas = document.getElementById('imageCanvas');
  const ctx = canvas.getContext('2d');
  
  // Create an image object
  const img = new Image();
  img.src = 'https://via.placeholder.com/300x200';
  
  // When image loads, draw it to canvas
  img.onload = function() {
    // Draw original image
    ctx.drawImage(img, 0, 0);
    
    // Apply grayscale filter
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg;     // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    
    ctx.putImageData(imageData, 0, 0);
  };
</script><canvas id="imageCanvas" width="300" height="200"></canvas>

<script>
  const canvas = document.getElementById('imageCanvas');
  const ctx = canvas.getContext('2d');
  
  // Create an image object
  const img = new Image();
  img.src = 'https://via.placeholder.com/300x200';
  
  // When image loads, draw it to canvas
  img.onload = function() {
    // Draw original image
    ctx.drawImage(img, 0, 0);
    
    // Apply grayscale filter
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    for (let i = 0; i < data.length; i += 4) {
      const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
      data[i] = avg;     // red
      data[i + 1] = avg; // green
      data[i + 2] = avg; // blue
    }
    
    ctx.putImageData(imageData, 0, 0);
  };
</script>

3. Simple Game Example

A basic game loop with keyboard controls.

(Game would be implemented with JavaScript - use arrow keys to move)

<!DOCTYPE html>
<html>
<head>
  <title>Simple Canvas Game</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; background: #f0f0f0; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Game state
    const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 30,
      speed: 5,
      color: '#4f46e5'
    };
    
    const keys = {
      ArrowUp: false,
      ArrowDown: false,
      ArrowLeft: false,
      ArrowRight: false
    };
    
    // Event listeners for keyboard
    window.addEventListener('keydown', (e) => {
      if (keys.hasOwnProperty(e.key)) {
        keys[e.key] = true;
      }
    });
    
    window.addEventListener('keyup', (e) => {
      if (keys.hasOwnProperty(e.key)) {
        keys[e.key] = false;
      }
    });
    
    // Game loop
    function gameLoop() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update player position
      if (keys.ArrowUp && player.y > 0) player.y -= player.speed;
      if (keys.ArrowDown && player.y < canvas.height - player.size) player.y += player.speed;
      if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
      if (keys.ArrowRight && player.x < canvas.width - player.size) player.x += player.speed;
      
      // Draw player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.size, player.size);
      
      // Draw instructions
      ctx.fillStyle = '#000';
      ctx.font = '16px Arial';
      ctx.fillText('Use arrow keys to move', 10, 20);
      
      // Continue game loop
      requestAnimationFrame(gameLoop);
    }
    
    // Start game
    gameLoop();
  </script>
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>Simple Canvas Game</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; background: #f0f0f0; }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>

  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    // Game state
    const player = {
      x: canvas.width / 2,
      y: canvas.height / 2,
      size: 30,
      speed: 5,
      color: '#4f46e5'
    };
    
    const keys = {
      ArrowUp: false,
      ArrowDown: false,
      ArrowLeft: false,
      ArrowRight: false
    };
    
    // Event listeners for keyboard
    window.addEventListener('keydown', (e) => {
      if (keys.hasOwnProperty(e.key)) {
        keys[e.key] = true;
      }
    });
    
    window.addEventListener('keyup', (e) => {
      if (keys.hasOwnProperty(e.key)) {
        keys[e.key] = false;
      }
    });
    
    // Game loop
    function gameLoop() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // Update player position
      if (keys.ArrowUp && player.y > 0) player.y -= player.speed;
      if (keys.ArrowDown && player.y < canvas.height - player.size) player.y += player.speed;
      if (keys.ArrowLeft && player.x > 0) player.x -= player.speed;
      if (keys.ArrowRight && player.x < canvas.width - player.size) player.x += player.speed;
      
      // Draw player
      ctx.fillStyle = player.color;
      ctx.fillRect(player.x, player.y, player.size, player.size);
      
      // Draw instructions
      ctx.fillStyle = '#000';
      ctx.font = '16px Arial';
      ctx.fillText('Use arrow keys to move', 10, 20);
      
      // Continue game loop
      requestAnimationFrame(gameLoop);
    }
    
    // Start game
    gameLoop();
  </script>
</body>
</html>

Canvas Best Practices

Performance

Use requestAnimationFrame for animations
Minimize canvas state changes (save/restore)
Use multiple canvases for complex UIs
Clear only the area that changed, not the whole canvas
Consider using offscreen canvas for complex drawings

Code Organization

Separate drawing logic from game/app logic
Use object-oriented approach for complex projects
Implement a proper game loop for games
Use helper functions for common drawing operations
Consider using canvas libraries for complex projects

Canvas Libraries and Frameworks

p5.js

A JavaScript library for creative coding, with a focus on making coding accessible.

https://p5js.org/

Fabric.js

A powerful and simple JavaScript HTML5 canvas library with SVG parsing capabilities.

http://fabricjs.com/

Konva.js

2D canvas library with object model, event handling, and animations.

https://konvajs.org/

< Previous: YouTube Embeds Next: HTML SVG >