When the canvas has a transform applied, let's say context.translate( 10, 10 ) then the clearing will be off by 10 pixels as it's done via context.clearRect( 0, 0, canvas.width, canvas.height ).

A simple workaround is canvas.width = canvas.width though less performant.

Another solution would be:

context.save();
context.setTranfsorm( 1, 0, 0, 1 0, 0 );
context.clearRect( canvas.width, canvas.height );
context.restore();

In options, or seperate callback, add a postprocessing shader. Using image-shader

Allowing an option on bootstrap() on stopping and clearing previous loop would prevent autoreloads from failing.

Proposal: bootstrap( { clear: true } ).

As you know, I typically control my sketches / apps with my own loop or library animitter and deciding to record the frames with canvas-recorder comes mid-project.
Using addFrame and downloadBundle is excellent for this, recording the frames with the addition of just a couple lines; however those functions use a shared instance. If I have multiple canvases to simultaneously save they end up interleaved in the resulting bundle.

It would be very helpful if Recorder could include addFrame and downloadBundle methods so that I may keep these frames in separate bundles while maintaining a light footprint of using canvas-recorder.

✌️

I need the highest video quality possible to record CSS and JS animations inside an HTML element. I have tried html2canvas library and RecordRTC to record the canvas but the quality of the recording is very low. Your solution seems to address this problem but I don't know how to pass the canvas and context to the draw method.

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

Can you please provide an HTML example to demonstrate the use of a specific canvas element for recording? I really appreciate it. Here is my code snippet since last year. I wish I can use canvas-recorder to automate tons of recording that I have to do.

https://jsfiddle.net/ztgqbu6x/

There should be a way to provide a canvas instead of implicitly creating the canvas internally. This is necessary for environments that created the canvas prior or have a different framework managing the state of the canvas.

Currently the draw callback recieves both the context and the time since the start of the recording. However, in a recording of a fixed amount of frames, I would like to know how fare I am through the animation relative. Maybe an additionargument t that returns the progress between 0 and 1. Alternativly a way to query that.

Hi there, It seems like this tool is meant to provide it's own canvas context, but what about in cases where there's already an existing canvas context that I want to record? Any tips for three.js users?

Thanks!

This issue only exists if your tsconfig.json does not include skipLibCheck enabled, so it was easy enough to bypass, but I ran into these two errors:

ERROR in /Users/kylephillips/Dropbox/dev/sketches/grid2d-subdiv-three/node_modules/canvas-recorder/index.d.ts
ERROR in /Users/kylephillips/Dropbox/dev/sketches/grid2d-subdiv-three/node_modules/canvas-recorder/index.d.ts(26,44):
TS2307: Cannot find module '../../../../../Users/roboshoes/Projects/canvas-recorder/src/shared'.

and

declare const bootstrap: (options?: import("../../../../../Users/roboshoes/Projects/canvas-recorder/src/shared").BoostrapOptions) => void;

this is from v1.7.1 so I havent verified if this happens with v1.8.0 yet.