Canvas Api

Drawing Shapes and Paths

The Canvas 2D API provides comprehensive primitives for creating both simple and complex graphics. From basic rectangles to sophisticated Bézier curves, you have complete control over every visual element.

Rectangles

Rectangles are the simplest Canvas shapes with dedicated methods:

// Solid filled rectangle
ctx.fillStyle = '#e74c3c';
ctx.fillRect(x, y, width, height);

// Rectangle outline
ctx.strokeStyle = '#2c3e50';
ctx.lineWidth = 3;
ctx.strokeRect(x, y, width, height);

// Clear a region (transparent)
ctx.clearRect(x, y, width, height);

Paths and Complex Shapes

Complex shapes use the path API to group drawing operations:

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 50);
ctx.lineTo(300, 100);
ctx.lineTo(200, 150);
ctx.closePath();
ctx.fillStyle = '#9b59b6';
ctx.fill();

Arcs and Curves

Create circular and curved shapes:

// Full circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = '#1abc9c';
ctx.fill();

// Bézier curves for smooth, complex shapes
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY);
ctx.stroke();

Styling Properties

Canvas provides extensive styling options for polished graphics:

// Fill and stroke styles
ctx.fillStyle = colorOrGradientOrPattern;
ctx.strokeStyle = colorOrGradientOrPattern;

// Line styling
ctx.lineWidth = number;
ctx.lineCap = 'butt' | 'round' | 'square';
ctx.lineJoin = 'miter' | 'round' | 'bevel';

// Shadow effects
ctx.shadowColor = color;
ctx.shadowBlur = number;
ctx.shadowOffsetX = number;
ctx.shadowOffsetY = number;

Gradients and Patterns

Create sophisticated fills with gradients:

// Linear gradient
const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, '#3498db');
gradient.addColorStop(1, '#2c3e50');
ctx.fillStyle = gradient;

// Radial gradient
const radialGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
radialGradient.addColorStop(0, '#1abc9c');
radialGradient.addColorStop(1, '#16a085');
ctx.fillStyle = radialGradient;

Learn more about Canvas drawing operations.

For understanding how these drawing operations integrate with the broader header structure in web pages, consider how Canvas elements interact with document flow and positioning.

Working with Images

Canvas excels at image manipulation, supporting loading, drawing, and pixel-level operations that enable powerful visual effects.

Drawing Images

The drawImage() method is versatile, accepting various image sources:

// Draw entire image at position
ctx.drawImage(imageElement, dx, dy);

// Draw with specific size
ctx.drawImage(imageElement, dx, dy, dWidth, dHeight);

// Draw region to region (cropping and scaling)
ctx.drawImage(imageElement, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Image Loading Patterns

Images must be fully loaded before drawing. Use the image onload event or promise-based patterns:

const image = new Image();
image.src = 'image.jpg';
image.onload = () => {
 ctx.drawImage(image, 0, 0);
};

For multiple images, use Promise.all() to load all resources before rendering:

function loadImages(urls) {
 return Promise.all(urls.map(url => {
 return new Promise((resolve, reject) => {
 const img = new Image();
 img.onload = () => resolve(img);
 img.onerror = reject;
 img.src = url;
 });
 }));
}

Pixel Manipulation

For advanced effects, access pixels directly using getImageData():

// Get pixel data
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;

// Modify pixels (grayscale conversion)
for (let i = 0; i < data.length; i += 4) {
 const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
 data[i] = avg; // Red
 data[i + 1] = avg; // Green
 data[i + 2] = avg; // Blue
}

// Put pixels back to canvas
ctx.putImageData(imageData, x, y);

Video Frame Processing

Canvas can capture and process video frames:

const video = document.createElement('video');
video.src = 'video.mp4';
video.play();

function processVideoFrame() {
 ctx.drawImage(video, 0, 0);
 const frameData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 // Process frame data...
 requestAnimationFrame(processVideoFrame);
}

For handling various file formats, refer to our guide on file operations in web applications. Our custom web application development team builds interactive canvas experiences.

Performance Optimization

Canvas performance becomes critical at scale. These optimization techniques ensure smooth rendering even with complex scenes, helping you achieve consistent 60fps performance.

Pre-render to Offscreen Canvas

For complex or repeated graphics, render once to an offscreen canvas:

// Create offscreen canvas
const offscreen = document.createElement('canvas');
offscreen.width = 100;
offscreen.height = 100;
const offCtx = offscreen.getContext('2d');

// Draw complex shape once
offCtx.fillStyle = '#3498db';
offCtx.beginPath();
offCtx.arc(50, 50, 40, 0, Math.PI * 2);
offCtx.fill();

// In render loop, draw the cached image
ctx.drawImage(offscreen, x, y);

This technique eliminates redundant drawing operations and significantly improves performance for repeated shapes.

Use Multiple Layered Canvases

For scenes with static and dynamic elements, layer them to minimize redraws:

<div id="game">
 <canvas id="background" width="800" height="600"></canvas>
 <canvas id="gameplay" width="800" height="600"></canvas>
 <canvas id="ui" width="800" height="600"></canvas>
</div>

Static backgrounds redraw less frequently, while gameplay and UI update independently.

Avoid Sub-pixel Rendering

Use integer coordinates to prevent anti-aliasing overhead:

// Before (sub-pixel rendering)
ctx.drawImage(img, 0.3, 0.5);

// After (integer coordinates)
ctx.drawImage(img, Math.floor(0.3), Math.floor(0.5));

Turn Off Transparency

If your canvas doesn't need transparency, specify this for optimization:

const ctx = canvas.getContext('2d', { alpha: false });

The browser can optimize rendering when transparency isn't required, improving fill rates significantly.

Batch Canvas Calls

Group similar operations to minimize expensive state changes:

// Instead of interleaved calls:
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 0, 100, 100);

// Batch by state - more efficient:
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
ctx.fillRect(200, 0, 100, 100);

ctx.fillStyle = 'blue';
ctx.fillRect(100, 0, 100, 100);

Image Caching Strategies

Cache different sizes of images rather than scaling repeatedly:

const imageCache = {};

function getCachedImage(src, width, height) {
 const key = `${src}-${width}-${height}`;
 if (!imageCache[key]) {
 const img = new Image();
 img.src = src;
 const cached = document.createElement('canvas');
 cached.width = width;
 cached.height = height;
 const cCtx = cached.getContext('2d');
 cCtx.drawImage(img, 0, 0, width, height);
 imageCache[key] = cached;
 }
 return imageCache[key];
}

Learn more about Canvas performance optimization from the official documentation.