100%

Canvas Path Benchmark

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Aug 12, 2012

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.

AI-generated description

Canvas Path Benchmark �� <a href="http://bl.ocks.org/3331937" 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.

It is derived from this example which performs the same Canvas benchmark but with another (non-default: 'source-over') composition mode, called 'destination-atop', which won't render identically to the SVG benchmark here.

When you want to observe the different canvas composition modes and their effect on timing, check out this benchmark; you will notice that different browsers will render different views as canvas composition mode support is not complete for many of them.

The Canvas results are faster than those measured by the equivalent SVG Path Benchmark, but mind the huge differences between the major browsers: Opera and IE9 have their SVG act together while the others are sluggish.

source: gist.github.com/gists/3331937

Similar vizzes

Loading thumbnail…

Canvas Path Benchmark

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`.

GGerHobbelt

91% 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

68% match

Loading thumbnail…

Gist e9e662643752b1cd6f46767b03eab04d

This example demonstrates how to draw a line graph using the HTML5 Canvas API, adapted from a Japanese presentation on Canvas fundamentals. The code initializes a canvas element, retrieves its 2D rendering context, and then draws a framed plotting area with gridlines, data points as arcs, text labels, and connecting line segments. It uses core Canvas methods such as `strokeRect`, `arc`, `fillText`, and `moveTo`/`lineTo`, along with `save` and `restore` to manage drawing states. The visualization is rendered directly to canvas with no external charting library, though the slides reference Chart.js and D3.js as alternatives.

MMiyaton

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

66% match

Loading thumbnail…

svg canvas clip-path

A side-by-side demonstration compares SVG and Canvas clipping in real time. Both render 80 randomly positioned circles and the text “SVG Clip Path” inside a circular clip region that follows the mouse. The SVG view uses a `<clipPath>` with a `<circle>` element, while the Canvas view applies the same path via `ctx.clip()`. D3 v5 handles mouse events and element selection, updating the clip circle’s `cx` and `cy` attributes and redrawing the canvas on each move.

11Cr18Ni9

65% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

65% match

Loading thumbnail…

svg & canvas & brush

This example overlays a canvas-rendered scatterplot of 1,000 randomly generated points with an SVG layer containing axes and a d3.brush selection rectangle. The canvas continuously redraws each frame using `requestAnimationFrame`, highlighting points under the mouse cursor via `ctx.isPointInPath` and filling those inside the brush area. The SVG brush, configured with `d3.brush()`, updates the selection bounds, demonstrating a hybrid approach that combines canvas performance with SVG’s interactive brush capabilities.

11Cr18Ni9

65% 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