HTML Canvas

Learn to draw graphics and animations with HTML5 Canvas

🎨 What is HTML Canvas?

The HTML Canvas element is used to draw graphics on a web page using JavaScript. It's like a blank drawing board where you can create shapes, images, animations, and interactive graphics. 


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

Canvas Basics

📐

Canvas Element

HTML container for graphics 

<canvas width="300" height="150"></canvas>
🎯

2D Context

JavaScript drawing interface 

const ctx = canvas.getContext('2d');
🖌️

Drawing Methods

Functions to create graphics 

ctx.fillRect(10, 10, 100, 50);
🎨

Styling

Colors, gradients, patterns 

ctx.fillStyle = 'red';

🔹 Basic Drawing

Draw simple shapes and lines on the canvas: 

<canvas id="basicCanvas" width="400" height="200" style="border: 1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('basicCanvas');
const ctx = canvas.getContext('2d');

// Draw a filled rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 100, 60);

// Draw a stroked rectangle
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.strokeRect(150, 20, 100, 60);

// Draw a circle
ctx.beginPath();
ctx.arc(320, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
</script>

Output:

🔹 Drawing Text

Add text to your canvas with custom fonts and styles: 

<canvas id="textCanvas" width="400" height="150" style="border: 1px solid #ccc;"></canvas>

<script>
const textCanvas = document.getElementById('textCanvas');
const textCtx = textCanvas.getContext('2d');

// Set font properties
textCtx.font = '30px Arial';
textCtx.fillStyle = 'purple';
textCtx.fillText('Hello Canvas!', 50, 50);

// Outlined text
textCtx.font = '20px Georgia';
textCtx.strokeStyle = 'orange';
textCtx.lineWidth = 2;
textCtx.strokeText('Outlined Text', 50, 100);
</script>

Output:

Hello Canvas!
Outlined Text

🔹 Gradients and Colors

Create beautiful gradients and color effects: 

<canvas id="gradientCanvas" width="400" height="200" style="border: 1px solid #ccc;"></canvas>

<script>
const gradCanvas = document.getElementById('gradientCanvas');
const gradCtx = gradCanvas.getContext('2d');

// Linear gradient
const linearGrad = gradCtx.createLinearGradient(0, 0, 200, 0);
linearGrad.addColorStop(0, 'red');
linearGrad.addColorStop(1, 'blue');
gradCtx.fillStyle = linearGrad;
gradCtx.fillRect(20, 20, 160, 80);

// Radial gradient
const radialGrad = gradCtx.createRadialGradient(300, 60, 10, 300, 60, 50);
radialGrad.addColorStop(0, 'yellow');
radialGrad.addColorStop(1, 'orange');
gradCtx.fillStyle = radialGrad;
gradCtx.fillRect(220, 20, 160, 80);
</script>

Output:

🔹 Simple Animation

Create moving graphics with JavaScript animation: 

<canvas id="animCanvas" width="400" height="150" style="border: 1px solid #ccc;"></canvas>

<script>
const animCanvas = document.getElementById('animCanvas');
const animCtx = animCanvas.getContext('2d');

let x = 0;

function animate() {
    // Clear canvas
    animCtx.clearRect(0, 0, 400, 150);
    
    // Draw moving circle
    animCtx.beginPath();
    animCtx.arc(x, 75, 20, 0, 2 * Math.PI);
    animCtx.fillStyle = 'red';
    animCtx.fill();
    
    // Update position
    x += 2;
    if (x > 420) x = -20;
    
    // Continue animation
    requestAnimationFrame(animate);
}

animate(); // Start animation
</script>

Output:

🔹 Canvas Applications

Common uses for HTML Canvas:

Popular Canvas Uses:

  • Games: 2D games and interactive experiences
  • Data Visualization: Charts, graphs, and infographics
  • Image Editing: Photo filters and manipulation
  • Animations: Smooth animations and effects
  • Drawing Apps: Digital painting and sketching tools
  • Simulations: Physics and particle systems

🧠 Test Your Knowledge

Which method gets the 2D drawing context for a canvas?