HTML · Graphics

Canvas Basics

Learn to create dynamic pixel-based graphics with Canvas

Find videos you like?

Save to resource drawer for future reference!

What is Canvas?

Dynamic pixel-based graphics with JavaScript

The HTML Canvas element is a container for graphics that are drawn using JavaScript. Unlike SVG, Canvas uses a raster (pixel-based) approach, giving you pixel-level control for dynamic content like games, animations, and data visualizations.

Key Advantages

✓High performance for complex graphics
✓Full JavaScript API control
✓Pixel-level manipulation
✓Great for animations and games

Common Uses

🎮 Games and interactive apps
✨ Animations and motion graphics
📊 Data visualization with thousands of points
🖼️ Photo and image manipulation
🎨 Generative and algorithmic art

Key Difference

Canvas is immediate mode - once you draw, it's permanent. You must redraw everything on each animation frame.

Getting Started with Canvas

Basic setup and accessing the drawing context

Step 1: Create the Canvas Element

<canvas id="myCanvas" width="400" height="300">
  Your browser doesn't support Canvas.
</canvas>

Step 2: Get the Drawing Context

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

Step 3: Start Drawing

// Set style
ctx.fillStyle = '#3b82f6';

// Draw a rectangle
ctx.fillRect(50, 50, 150, 100);

Example: Basic Canvas Drawing

Rectangle, circle, and text in Canvas

Frontend

<div class="canvas-container">
  <h3>Simple Canvas Drawing</h3>
  <canvas id="basicCanvas" width="300" height="250"></canvas>
</div>

Live Preview

Loading preview...

Drawing Shapes

Methods for creating rectangles, circles, lines, and more

fillRect()

Filled rectangle

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

strokeRect()

Rectangle outline

ctx.strokeRect(x, y, width, height)

arc()

Circle or arc

ctx.arc(x, y, radius, startAngle, endAngle)

moveTo() / lineTo()

Draw lines

ctx.moveTo(x1, y1); ctx.lineTo(x2, y2)

Example: Drawing Various Shapes

Rectangles, circles, triangle, star, curves, and arcs

Frontend

<div class="shapes-container">
  <h3>Various Canvas Shapes</h3>
  <canvas id="shapesCanvas" width="400" height="300"></canvas>
</div>

Live Preview

Loading preview...

Styling and Colors

Control appearance with colors, transparency, and line styles

fillStyle

Fill color for shapes

ctx.fillStyle = '#3b82f6'

strokeStyle

Outline/border color

ctx.strokeStyle = '#f97316'

lineWidth

Thickness of lines

ctx.lineWidth = 3

globalAlpha

Transparency (0-1)

ctx.globalAlpha = 0.5

Tip: Color Formats

Use hex (#3b82f6), RGB (rgb(59, 130, 246)), or HSL (hsl(217, 98%, 61%))

Drawing Text

Add readable text to your Canvas drawings

Use the Canvas API to render text with different fonts, sizes, and alignments.

fillText()

Draw filled text

ctx.fillText("Hello", x, y)

strokeText()

Draw text outline

ctx.strokeText("Hello", x, y)

Example: Text Styles and Alignment

Different fonts, sizes, and text positioning

Frontend

<div class="text-container">
  <h3>Text in Canvas</h3>
  <canvas id="textCanvas" width="400" height="250"></canvas>
</div>

Live Preview

Loading preview...

Canvas Animations

Bring your graphics to life with smooth animations

Animation on Canvas requires clearing and redrawing the entire scene on each frame using requestAnimationFrame().

Basic Animation Pattern

function animate() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Update objects (position, rotation, etc.)
  updateObjects();
  
  // Draw everything
  drawObjects();
  
  // Request next frame
  requestAnimationFrame(animate);
}

animate();

Example: Bouncing Animated Circle

Circle bounces around with changing colors

Frontend

<div class="animation-container">
  <h3>Animated Canvas</h3>
  <canvas id="animCanvas" width="400" height="250"></canvas>
  <p class="anim-info">Circle moves and changes color</p>
</div>

Live Preview

Loading preview...

Interactive Canvas

Handle mouse and keyboard events for user interaction

Canvas is part of the DOM, so you can add event listeners for mouse clicks, movement, keyboard input, and more.

Common Events

•mousedown / mouseup- Mouse button pressed/released
•mousemove- Mouse position changed
•click- Canvas clicked
•keydown / keyup- Keyboard input

Example: Draw by Dragging

Click and drag your mouse to paint on canvas

Frontend

<div class="interactive-container">
  <h3>Interactive Canvas - Paint</h3>
  <canvas id="paintCanvas" width="400" height="250"></canvas>
  <p class="interact-info">Click and drag to draw</p>
</div>

Live Preview

Loading preview...

Canvas Best Practices

✅ Do This

✓ Use requestAnimationFrame() for animations
✓ Cache context: const ctx = canvas.getContext('2d')
✓ Set canvas size with HTML attributes, not CSS
✓ Clear canvas before each frame
✓ Use getImageData() sparingly (slow operation)
✓ Optimize with OffscreenCanvas for heavy work

❌ Avoid This

✗ Don't use setTimeout for animations
✗ Don't set canvas size with CSS only
✗ Don't forget to clear canvas (causes trails)
✗ Don't call getContext() repeatedly
✗ Don't draw millions of objects per frame
✗ Don't hardcode colors (use variables)

Performance Tip

For best performance with many objects, use OffscreenCanvas or render to a secondary canvas and draw that texture.

Canvas vs SVG Quick Comparison

Feature	Canvas	SVG
Type	Raster (pixel-based)	Vector (math-based)
Performance (many objects)	✓ Better	Good for fewer elements
Scalability	Pixelated when enlarged	✓ Scales perfectly
DOM Access	Single element	✓ Each shape accessible
Best For	Games, animations, effects	✓ Icons, diagrams, charts
CSS Styling	No direct support	✓ Full CSS support

Choose Your Tool

Use Canvas for dynamic, interactive graphics. Use SVG for static, scalable graphics.

Real-World Canvas Use Cases

🎮

2D Games

Browser-based games

📊

Data Charts

Interactive visualizations

✨

Animations

Motion graphics

📸

Photo Filters

Image manipulation

🎨

Drawing Apps

Paint and sketch tools

🌈

Generative Art

Algorithmic artwork

Previous Topic

SVG Basics

Inline SVG, basic shapes (circle, rect, path), and SVG attributes.

Next Topic

Ordered Lists

<ol> tag, type attribute (1, A, a, I, i), start, reversed attributes.

Ask a Question

Have a question about Canvas Basics? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Graphics

Canvas Basics

Learn to create dynamic pixel-based graphics with Canvas

Find videos you like?

Save to resource drawer for future reference!

What is Canvas?

Dynamic pixel-based graphics with JavaScript

Key Advantages

✓High performance for complex graphics
✓Full JavaScript API control
✓Pixel-level manipulation
✓Great for animations and games

Common Uses

🎮 Games and interactive apps
✨ Animations and motion graphics
📊 Data visualization with thousands of points
🖼️ Photo and image manipulation
🎨 Generative and algorithmic art

Key Difference

Canvas is immediate mode - once you draw, it's permanent. You must redraw everything on each animation frame.

Getting Started with Canvas

Basic setup and accessing the drawing context

Step 1: Create the Canvas Element

<canvas id="myCanvas" width="400" height="300">
  Your browser doesn't support Canvas.
</canvas>

Step 2: Get the Drawing Context

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

Step 3: Start Drawing

// Set style
ctx.fillStyle = '#3b82f6';

// Draw a rectangle
ctx.fillRect(50, 50, 150, 100);

Example: Basic Canvas Drawing

Rectangle, circle, and text in Canvas

Frontend

<div class="canvas-container">
  <h3>Simple Canvas Drawing</h3>
  <canvas id="basicCanvas" width="300" height="250"></canvas>
</div>

Live Preview

Loading preview...

Drawing Shapes

Methods for creating rectangles, circles, lines, and more

fillRect()

Filled rectangle

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

strokeRect()

Rectangle outline

ctx.strokeRect(x, y, width, height)

arc()

Circle or arc

ctx.arc(x, y, radius, startAngle, endAngle)

moveTo() / lineTo()

Draw lines

ctx.moveTo(x1, y1); ctx.lineTo(x2, y2)

Example: Drawing Various Shapes

Rectangles, circles, triangle, star, curves, and arcs

Frontend

<div class="shapes-container">
  <h3>Various Canvas Shapes</h3>
  <canvas id="shapesCanvas" width="400" height="300"></canvas>
</div>

Live Preview

Loading preview...

Styling and Colors

Control appearance with colors, transparency, and line styles

fillStyle

Fill color for shapes

ctx.fillStyle = '#3b82f6'

strokeStyle

Outline/border color

ctx.strokeStyle = '#f97316'

lineWidth

Thickness of lines

ctx.lineWidth = 3

globalAlpha

Transparency (0-1)

ctx.globalAlpha = 0.5

Tip: Color Formats

Use hex (#3b82f6), RGB (rgb(59, 130, 246)), or HSL (hsl(217, 98%, 61%))

Drawing Text

Add readable text to your Canvas drawings

Use the Canvas API to render text with different fonts, sizes, and alignments.

fillText()

Draw filled text

ctx.fillText("Hello", x, y)

strokeText()

Draw text outline

ctx.strokeText("Hello", x, y)

Example: Text Styles and Alignment

Different fonts, sizes, and text positioning

Frontend

<div class="text-container">
  <h3>Text in Canvas</h3>
  <canvas id="textCanvas" width="400" height="250"></canvas>
</div>

Live Preview

Loading preview...

Canvas Animations

Bring your graphics to life with smooth animations

Animation on Canvas requires clearing and redrawing the entire scene on each frame using requestAnimationFrame().

Basic Animation Pattern

function animate() {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Update objects (position, rotation, etc.)
  updateObjects();
  
  // Draw everything
  drawObjects();
  
  // Request next frame
  requestAnimationFrame(animate);
}

animate();

Example: Bouncing Animated Circle

Circle bounces around with changing colors

Frontend

<div class="animation-container">
  <h3>Animated Canvas</h3>
  <canvas id="animCanvas" width="400" height="250"></canvas>
  <p class="anim-info">Circle moves and changes color</p>
</div>

Live Preview

Loading preview...

Interactive Canvas

Handle mouse and keyboard events for user interaction

Canvas is part of the DOM, so you can add event listeners for mouse clicks, movement, keyboard input, and more.

Common Events

•mousedown / mouseup- Mouse button pressed/released
•mousemove- Mouse position changed
•click- Canvas clicked
•keydown / keyup- Keyboard input

Example: Draw by Dragging

Click and drag your mouse to paint on canvas

Frontend

<div class="interactive-container">
  <h3>Interactive Canvas - Paint</h3>
  <canvas id="paintCanvas" width="400" height="250"></canvas>
  <p class="interact-info">Click and drag to draw</p>
</div>

Live Preview

Loading preview...

Canvas Best Practices

✅ Do This

✓ Use requestAnimationFrame() for animations
✓ Cache context: const ctx = canvas.getContext('2d')
✓ Set canvas size with HTML attributes, not CSS
✓ Clear canvas before each frame
✓ Use getImageData() sparingly (slow operation)
✓ Optimize with OffscreenCanvas for heavy work

❌ Avoid This

✗ Don't use setTimeout for animations
✗ Don't set canvas size with CSS only
✗ Don't forget to clear canvas (causes trails)
✗ Don't call getContext() repeatedly
✗ Don't draw millions of objects per frame
✗ Don't hardcode colors (use variables)

Performance Tip

For best performance with many objects, use OffscreenCanvas or render to a secondary canvas and draw that texture.

Canvas vs SVG Quick Comparison

Feature	Canvas	SVG
Type	Raster (pixel-based)	Vector (math-based)
Performance (many objects)	✓ Better	Good for fewer elements
Scalability	Pixelated when enlarged	✓ Scales perfectly
DOM Access	Single element	✓ Each shape accessible
Best For	Games, animations, effects	✓ Icons, diagrams, charts
CSS Styling	No direct support	✓ Full CSS support

Choose Your Tool

Use Canvas for dynamic, interactive graphics. Use SVG for static, scalable graphics.

Real-World Canvas Use Cases

🎮

2D Games

Browser-based games

📊

Data Charts

Interactive visualizations

✨

Animations

Motion graphics

📸

Photo Filters

Image manipulation

🎨

Drawing Apps

Paint and sketch tools

🌈

Generative Art

Algorithmic artwork

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

SVG Basics

Ordered Lists

HTML Code Editor

Building Your Learning Module...

Canvas Basics

Key Advantages

Common Uses

Key Difference

Step 1: Create the Canvas Element

Step 2: Get the Drawing Context

Step 3: Start Drawing

Example: Basic Canvas Drawing

fillRect()

strokeRect()

arc()

moveTo() / lineTo()

Example: Drawing Various Shapes

fillStyle

strokeStyle

lineWidth

globalAlpha

Tip: Color Formats

fillText()

strokeText()

Example: Text Styles and Alignment

Basic Animation Pattern

Example: Bouncing Animated Circle

Common Events

Example: Draw by Dragging

✅ Do This

❌ Avoid This

Performance Tip

Choose Your Tool

2D Games

Data Charts

Animations

Photo Filters

Drawing Apps

Generative Art

SVG Basics

Ordered Lists

HTML Code Editor

Canvas Basics

Key Advantages

Common Uses

Key Difference

Step 1: Create the Canvas Element

Step 2: Get the Drawing Context

Step 3: Start Drawing

Example: Basic Canvas Drawing

fillRect()

strokeRect()

arc()

moveTo() / lineTo()

Example: Drawing Various Shapes

fillStyle

strokeStyle

lineWidth

globalAlpha

Tip: Color Formats

fillText()

strokeText()

Example: Text Styles and Alignment

Basic Animation Pattern

Example: Bouncing Animated Circle

Common Events

Example: Draw by Dragging

✅ Do This

❌ Avoid This

Performance Tip

Choose Your Tool

2D Games

Data Charts

Animations

Photo Filters

Drawing Apps

Generative Art