Skip to main content
SimilarExport ZIP
100%

canvas recorder (use theRecorder.stop() to stop and save as .webm video)

✓ Published0🌍 Public
TTBD
Last edited Feb 3, 2021
Created on Feb 3, 2021

This example records the live drawing on a canvas element to a WebM video file. It uses the `captureStream()` method on a canvas with the class `drawingArea` and a custom `MediaRecorder` object to capture the stream. The recorder collects data chunks via `ondataavailable` and, upon stopping, stops the video track and saves the recorded chunks as `test.webm` using a Blob and object URL. The source code relies on the canvas-recorder library from GitHub.

AI-generated description

Similar vizzes

Loading thumbnail…

[Run it!](https://bl.ocks.org/curran/raw/3184b45f555dae6bebb1536110763824/)

This example displays a live webcam feed as an immersive digital mirror, filling the entire viewport with the video stream. It uses the MediaDevices `getUserMedia` API to request camera access and the `webrtc-adapter` library for cross-browser compatibility, with `window.URL.createObjectURL` to bind the stream to an HTML5 video element. The page relies on minimal CSS and JavaScript, drawing from the camera-control techniques in David Walsh’s tutorial and the MDN documentation for media capture.

CCurran Kelleher
56% match
Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey
56% 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
56% match
Loading thumbnail…

DOM-to-Canvas using D3

This example shows a canvas scenegraph implemented using custom namespaced DOM elements, where moving the mouse appends `custom:circle` elements that grow and fade over two seconds. A timer continuously redraws the canvas by iterating over the DOM children, mapping each element’s attributes to Canvas API calls like `beginPath` and `arc`. The code uses D3 v3’s `d3.select`, `d3.event`, `d3.timer`, and `d3.ns.prefix` to manage the custom namespace and transitions, demonstrating an alternative to SVG for customized rendering scenarios.

Mmbostock
55% match
Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed
55% match
Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135
55% match
Loading thumbnail…

Document

A real-time waveform plot on a canvas scrolls horizontally as new random data points arrive, creating a dynamic line graph. The animation updates every 100 milliseconds, shifting the drawing origin leftward and clearing the canvas to simulate an endless stream. Built with the HTML5 Canvas API, it uses `setInterval`, `clearRect`, and `translate` to manage the redraw cycle. The line is drawn in red, showing a continuous trace of fluctuating y-values around a baseline.

KKelvinZCH
55% match
Loading thumbnail…

Sonagraph

This example shows a real-time waterfall spectrogram that maps audio frequency data from the user’s microphone into a scrolling visual of colored pixels. It uses the Web Audio API’s `AnalyserNode` to capture frequency amplitudes, then renders each frame onto an HTML5 Canvas. The code copies the canvas with `drawImage`, shifts it downward via `translate`, and colors each frequency bin using the chroma.js color scale, producing a continuously updating graph of sound over time.

Dd3noob
54% match