Recording the Canvas

Method 1: Using the built-in recorder

q5's built-in canvas recorder provides a simple way to record videos of your canvas!

It's powered by MediaRecorder, which prioritizes low-latency super fast recording.

Yet, recording large canvases is an intensive process, so your computer still may not be able to do it in real time. If real-time interaction while recording is a priority, consider reducing the canvas' size, frame rate, and/or recording bitrate.

MediaRecorder Limitations

You may want to consider using a screen capture tool like OBS Studio instead, due to MediaRecorder's limitations.

HDR video encoding is not yet supported by any web browser

Recordings are made at a variable frame rate (VFR), which means output videos need to be re-encoded before they can be used in popular video editing software like QuickTime and Da Vinci Resolve.

Re-Encoding

To re-encode videos at a consistent frame rate and higher compression level (for a smaller file size), use a tool like HandBrake or ffmpeg.

Chat AI is good at explaining video encoding setting and can help you use ffmpeg.

This command takes an input file produced by MediaRecorder in Chrome and (using GPU acceleration) converts it to playback at 60fps with high visual quality with the h.265 (HVEC) compression format.

ffmpeg -i input.mp4 \
-c:v hevc_videotoolbox -q:v 50 \
-r 60 \
-tag:v hvc1 \
output.mp4

Method 2: Save Frames to Encode a Video

To make higher quality videos you should try this technique.

You can use the save function to save an image of the canvas after each draw cycle. Be sure to give the image a name that includes the value of frameCount at the end.

Then use a tool like ffmpeg to create a video from the saved frames. For reference this is the same technique stop motion filmmakers use.

Note that this method requires more memory than screen recording.