Canvas Rendering Pipeline

This document covers OpenLayers' Canvas-based rendering pipeline, which provides high-performance vector and raster rendering using the HTML5 Canvas API. The pipeline transforms geographic features and geometries into optimized rendering instructions that are executed during frame rendering.

For information about WebGL rendering, see WebGL Rendering System. For general layer architecture concepts, see Layer Architecture.

System Overview

The Canvas rendering pipeline follows a two-phase approach: an instruction generation phase during feature processing, and an execution phase during frame rendering. This separation allows for optimized rendering performance by pre-computing drawing operations and caching them for reuse.

Canvas Rendering Architecture

100%

Instruction-Based Rendering System

The canvas pipeline uses a command pattern where rendering operations are encoded as serializable instructions during feature processing, then executed during frame rendering.

Instruction Flow

100%

Key Data Structures

Component	Purpose	Key Properties
SerializableInstructions	Container for rendering commands	instructions, coordinates, textStates, fillStates, strokeStates
CanvasInstruction	Individual rendering command	Instruction type and parameters
ExecutorGroup	Groups executors by z-index	executorsByZIndex_, maxExtent_, resolution_
Executor	Executes instructions for specific geometry type	instructions, coordinates, pixelCoordinates_

Builder Pattern for Geometry Rendering

The canvas pipeline uses specialized builder classes to convert different geometry types into optimized rendering instructions.

Builder Class Hierarchy

100%

Builder Lifecycle

The builder pattern follows this sequence:

1. Initialization: CanvasBuilderGroup creates builders for each geometry type
2. Feature Processing: renderFeature() calls appropriate builder methods
3. Instruction Generation: Builders accumulate rendering instructions
4. Finalization: finish() returns SerializableInstructions

100%

Execution Pipeline

During frame rendering, the ExecutorGroup coordinates the execution of cached instructions to produce the final canvas output.

Execution Architecture

100%

Key Execution Methods

Method	Location	Purpose
execute()	ExecutorGroup	Coordinates execution across builders
execute_()	Executor	Executes instructions for specific geometry type
transform2D()	Geometry utilities	Transforms coordinates to pixel space
replayImageOrLabel_()	Executor	Renders images and text labels

Layer-Specific Renderers

Different layer types use specialized canvas renderers that implement the instruction-based pipeline with layer-specific optimizations.

Vector Layer Rendering

CanvasVectorLayerRenderer handles feature-based layers:

100%

Vector Tile Layer Rendering

CanvasVectorTileLayerRenderer extends tile rendering with vector features:

100%

Performance Optimizations

The canvas pipeline includes several performance optimizations:

• Instruction Caching: Rendering instructions are cached and reused across frames
• Coordinate Transformation: Batch coordinate transformations for efficiency
• Z-Index Grouping: Instructions grouped by z-index for optimal draw order
• Hit Detection: Separate hit detection canvas for pixel-level feature detection
• Decluttering: Collision detection for text and symbol placement