Lesson 31: Creating Graphics Part 1

Learn how to create graphics with JavaScript using the Canvas API - draw lines, shapes, and patterns with step-by-step examples.

❮ Previous Lesson Next Lesson: Graphics Part 2 ❯

31.1 Introduction to Canvas Graphics

The HTML Canvas element provides a powerful way to create graphics using JavaScript. With canvas, you can draw shapes, create animations, build games, and generate data visualizations.

Key concepts:
  • Canvas is an HTML element that provides a drawing surface
  • JavaScript is used to draw on the canvas
  • The drawing context (2D or WebGL) provides drawing methods
  • Coordinates are measured in pixels from the top-left corner
  • Canvas is resolution-dependent - specify width/height attributes

31.2 Setting Up the Canvas

First, create a canvas element in your HTML:

<canvas id="myCanvas" width="500" height="300">
    Your browser does not support the canvas element.
</canvas>

Then, get the drawing context in JavaScript:

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

Example 31.1: Basic Canvas Setup

This example shows a blank canvas ready for drawing:

31.3 Drawing Lines

Lines are the foundation of all drawing on canvas. Use these steps:

// Start a new path
ctx.beginPath();

// Move to starting point
ctx.moveTo(50, 50);

// Draw line to end point
ctx.lineTo(250, 150);

// Set line style
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;

// Draw the line
ctx.stroke();

Example 31.2: Drawing Lines

Click the buttons to draw different types of lines:

31.4 Drawing Triangles

Triangles are created by connecting three points with lines:

ctx.beginPath();
ctx.moveTo(100, 100); // Start at point A
ctx.lineTo(200, 100); // Line to point B
ctx.lineTo(150, 50);  // Line to point C
ctx.closePath();      // Line back to point A
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.stroke();

Example 31.3: Drawing Triangles

Click the buttons to draw different types of triangles:

31.5 Drawing Rectangles

Canvas provides direct methods for drawing rectangles:

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

// Draw a filled rectangle
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(100, 75, 150, 100);

// Clear a rectangular area
ctx.clearRect(125, 100, 100, 50);

Example 31.4: Drawing Rectangles

Click the buttons to draw different rectangle examples:

31.6 Creating Patterns

You can create patterns with lines and shapes:

// Draw a grid pattern
for (let x = 0; x < canvas.width; x += 20) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.strokeStyle = '#ccc';
    ctx.stroke();
}

for (let y = 0; y < canvas.height; y += 20) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.strokeStyle = '#ccc';
    ctx.stroke();
}

Example 31.5: Creating Patterns

Click the buttons to create different patterns:

31.7 Canvas Best Practices

Effective Canvas Usage:
  • Always set width/height attributes (not CSS)
  • Use requestAnimationFrame for animations
  • Clear the canvas with clearRect() before redrawing
  • Save/restore context state for complex drawings
  • Batch drawing operations for performance
  • Consider using offscreen canvas for complex scenes

Performance

Canvas operations are fast but minimize state changes

Responsive Design

Adjust canvas size with JavaScript on window resize

Accessibility

Provide fallback content for screen readers

Cross-Browser

Test on different browsers for consistent results

❮ Previous Lesson Next Lesson: Graphics Part 2 ❯