HTML <canvas> Element

Publish in HTML Tutorial el 23/05/2025 17:40

The HTML <canvas> element provides a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, art, or other visual images on the fly using JavaScript. It's essentially a drawable region defined in HTML code with height and width attributes.

Key characteristics of <canvas>:

Requires JavaScript to actually draw graphics
Has several methods for drawing paths, boxes, circles, text, and adding images
Is supported in all modern browsers
Provides a powerful API for pixel manipulation

Basic Canvas Syntax

Here's how to define a basic canvas element in HTML:

Canvas Rendering Context

To actually draw on the canvas, you need to get its rendering context:

Canvas Examples

Example 1: Drawing a Rectangle

This example shows how to draw a simple filled rectangle on a canvas.

Play Code

<canvas id="rectCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('rectCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 150, 80);
</script>

Example 2: Drawing a Circle

This example demonstrates how to draw a circle using the arc method.

Play Code

<canvas id="circleCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('circleCanvas');
  const ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(100, 100, 80, 0, 2 * Math.PI);
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 3;
  ctx.stroke();
</script>

Example 3: Drawing Text

Canvas can also render text with various styling options.

Play Code

<canvas id="textCanvas" width="300" height="100" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('textCanvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '30px Arial';
  ctx.fillStyle = 'blue';
  ctx.fillText('Hello Canvas!', 50, 60);
</script>

Example 4: Simple Animation (JavaScript)

This example shows a basic animation of a bouncing ball using JavaScript.

Play Code

<canvas id="animateCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('animateCanvas');
  const ctx = canvas.getContext('2d');
  let x = canvas.width/2;
  let y = canvas.height/2;
  let dx = 2;
  let dy = -2;
  const radius = 20;

  function drawBall() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2);
    ctx.fillStyle = "purple";
    ctx.fill();
    ctx.closePath();
    
    if(x + dx > canvas.width-radius || x + dx < radius) dx = -dx;
    if(y + dy > canvas.height-radius || y + dy < radius) dy = -dy;
    
    x += dx;
    y += dy;
    
    requestAnimationFrame(drawBall);
  }
  drawBall();
</script>

Example 5: Drawing an Image (JavaScript)

This example demonstrates how to load and draw an image onto the canvas.

Play Code

<canvas id="imageCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
  const canvas = document.getElementById('imageCanvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 50, 50, 200, 100);
  };
  img.src = 'https://artdraw.muisca.co/images/tucan.png';
</script>

Tips and Tricks

Performance: For complex animations, consider using requestAnimationFrame instead of setInterval or setTimeout.
Retina Displays: To make canvas look sharp on high-DPI displays, double the canvas size and scale it down using CSS.
Clearing: Use clearRect(0, 0, width, height) to clear the canvas between frames.
Save/Restore: Use ctx.save() and ctx.restore() to manage the drawing state.
Optimization: For static elements, draw them once to an offscreen canvas and then copy to the main canvas.