JavaScript Canvas

Drawing and creating graphics with HTML5 Canvas

🖼️ What is HTML5 Canvas?

The HTML5 Canvas element provides a powerful way to draw graphics, create animations, and build interactive visualizations using JavaScript. It's like a digital drawing board in your web page. 


<!-- HTML -->
<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
// Get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a simple shape
ctx.fillStyle = 'lightblue';
ctx.fillRect(50, 50, 100, 80);
</script>

Output:

Canvas Drawing Methods

⬜

Rectangles

Draw filled and outlined rectangles 

ctx.fillRect(x, y, width, height);
⭕

Circles & Arcs

Create circular shapes and arcs 

ctx.arc(x, y, radius, 0, 2*Math.PI);
📏

Lines & Paths

Draw lines and custom paths 

ctx.lineTo(x, y);
🎨

Text & Images

Add text and images to canvas 

ctx.fillText('Hello', x, y);

🔹 Drawing Basic Shapes

Learn to draw fundamental shapes on canvas: 

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

// Rectangle
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 60);

// Circle
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(150, 50, 30, 0, 2 * Math.PI);
ctx.fill();

// Triangle
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(250, 20);
ctx.lineTo(220, 80);
ctx.lineTo(280, 80);
ctx.closePath();
ctx.fill();

Output:

🔹 Adding Text and Styling

Canvas can display text with various styles: 

// Set font properties
ctx.font = '24px Arial';
ctx.fillStyle = 'darkblue';
ctx.textAlign = 'center';

// Draw text
ctx.fillText('Hello Canvas!', 200, 50);

// Outlined text
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.strokeText('Outlined Text', 200, 100);

Output:

🔹 Canvas Animation Loop

Create smooth animations using requestAnimationFrame: 

let angle = 0;

function drawRotatingSquare() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Save current state
    ctx.save();
    
    // Move to center and rotate
    ctx.translate(150, 75);
    ctx.rotate(angle);
    
    // Draw square
    ctx.fillStyle = 'purple';
    ctx.fillRect(-25, -25, 50, 50);
    
    // Restore state
    ctx.restore();
    
    // Update angle
    angle += 0.05;
    
    // Continue animation
    requestAnimationFrame(drawRotatingSquare);
}

drawRotatingSquare();

Output:

🔹 Canvas Boilerplate Template

A complete starter template for canvas projects: 

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Project</title>
    <style>
        canvas { border: 1px solid #000; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Game variables
        let gameRunning = true;
        
        // Main game loop
        function gameLoop() {
            if (!gameRunning) return;
            
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Update game logic here
            update();
            
            // Draw everything here
            draw();
            
            // Continue loop
            requestAnimationFrame(gameLoop);
        }
        
        function update() {
            // Update game objects
        }
        
        function draw() {
            // Draw game objects
            ctx.fillStyle = 'blue';
            ctx.fillRect(100, 100, 50, 50);
        }
        
        // Start the game
        gameLoop();
    </script>
</body>
</html>

🧠 Test Your Knowledge

Which method clears the entire canvas?