100%

Canvas Path Benchmark

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Aug 12, 2012

This interactive canvas benchmark measures the time required to draw successive sets of 250 line segments on an HTML5 Canvas, up to 5,000 total segments, while cycling through eleven different globalCompositeOperation modes. It uses the Canvas 2D API with stroke paths and requestAnimationFrame for animation. The results table updates in real time, showing the elapsed time and per-set rendering time for each composition mode, revealing performance differences across operations like `source-over`, `lighter`, and `xor`.

AI-generated description

Canvas Path Benchmark �� <a href="http://bl.ocks.org/3331545" title="view this gist via bl.ocks.org">?</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">8</a>

This example benchmarks the time taken to draw a line consisting of 5000 separate segments into an HTML5 Canvas, using any of the composition modes.

Watch the 'Time of Last Set' numbers to see the difference between the various composition modes while the benchmark progresses to plot 5000 line segments.

This benchmark accompanies this Canvas benchmark, which uses the 'source-over' default composition mode.

source: gist.github.com/gists/3331545

Similar vizzes

Loading thumbnail…

Canvas Path Benchmark

This benchmark measures the time required to draw 5,000 individual line segments on an HTML5 Canvas, comparing rendering performance across browsers. It shows how Canvas path drawing scales with increasing segment counts, with results tabulated in real time. The code uses the Canvas 2D API’s `beginPath`, `moveTo`, `lineTo`, and `stroke` methods, along with `requestAnimationFrame` to pace animation frames. It runs randomized segment generation with a subtle correction toward the canvas center, logging elapsed time per set and cumulative time in a table. The example is derived from a similar SVG benchmark, highlighting differences between Canvas and SVG rendering speeds.

GGerHobbelt

91% match

Loading thumbnail…

canvas globalCompositeOperation

A visualization gallery shows 26 small canvas panels, each demonstrating a different Canvas globalCompositeOperation mode. Three static colored circles (red, blue, green) form the background, while a single yellow circle bounces around each panel using d3.v4’s data binding and requestAnimationFrame. Users can drag the moving circle with their mouse, pausing its animation. The code defines each circle’s initial position and velocity via JavaScript, then applies the composite operation from the `types` array to control how yellow blends with the background.

11Cr18Ni9

68% match

Loading thumbnail…

column-render

This example compares two canvas-based techniques for rendering line charts with large datasets. It draws a time series of system metrics (CPU idle percentage, memory usage) using both chained `lineTo` commands and a column-oriented approach that groups points by their x-coordinate. The column method renders up to three times faster with a million points and provides better control over anti-aliasing blur. The code uses D3.js for data loading and scaling, and Canvas API methods like `ctx.lineTo`, `ctx.moveTo`, and `ctx.clearRect`. Clicking either chart re-renders it and displays the elapsed time.

11wheel

67% match

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9

64% match

Loading thumbnail…

Canvas Fiddling

A small animated square glides horizontally across a blank canvas, moving in discrete steps and disappearing from its starting position as it advances. The example demonstrates fundamental Canvas 2D drawing and animation using the HTML5 `getContext('2d')` API, with a rectangular fill drawn via `fillRect` and cleared each frame using `clearRect`. Driven by a `setInterval` timer at 20-millisecond intervals, the square’s position increments by one pixel per frame, creating a simple, linear motion loop without user interaction.

SStrunck

64% match

Loading thumbnail…

Canvas Swarm

A swarm of 500 points drifts and bounces across a canvas, each point’s velocity and position evolving through a simple physics model with random impulses and damping. The animation runs at a target frame rate, with a live FPS counter displayed. The visualization uses D3’s `d3.range`, `d3.scale.linear`, and `d3.timer` APIs, and renders via Canvas `getContext("2d")`, drawing each point as an arc with `beginPath` and `fill`/`stroke`. The data is procedurally generated—no external dataset—and the canvas is cleared each frame with `clearRect`.

Mmbostock

64% match

Loading thumbnail…

canvas-erase

Four synthetic line charts repeatedly replace each other on a canvas overlay, with a black-and-white XOR transition that erases and redraws the previous chart. The visualization uses D3.js for chart generation and the Canvas API for animation, driven by `transition.attrTween` and `setInterval`. Random rectangles paint over the canvas to fade between states, while the `ctx.globalCompositeOperation` toggles between `'source-over'` and `'xor'` to create the erase effect.

11wheel

64% match

Loading thumbnail…

Animate thousands of points with canvas and D3

This block animates 7,000 colored points between five different layouts—sine wave, phyllotaxis spiral, spiral, and grid—using canvas and D3. Each point stores its current position, and when the user clicks, the `animate` function captures the start and target positions, then uses d3-timer and d3-ease to interpolate over 1.5 seconds before drawing the points to a 2D canvas context. The layouts are generated by mutating the x and y properties of the points array with functions like `sineLayout`, `phyllotaxisLayout`, and `gridLayout`. The canvas is scaled to the device pixel ratio for crisp rendering, and clicking the canvas stops the animation and shows a play control. The example is from a Bocoup blog post about smoothly animating thousands of points with HTML5 canvas and D3.

AAjayyy

63% match