ccapture.js | capture canvas-based animations | Canvas library

ccapture.js is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, User Interface, Canvas applications. ccapture.js has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i zcapture.js' or download it from GitHub, npm.

CCapture.js is a library to help capturing animations created with HTML5 canvas at a fixed framerate. An example is probably worth a lot of words: CCapture.js with Game of Life 3D. Let's say that you finally have your amazing canvas-based animation running in your browser, be it 2D or 3D with the power of WebGL. You've been working hard to keep it fast and smooth. If you're using requestAnimationFrame you're aiming for a framerate of 60fps or, in other words, each frame is taking 16ms or less to render. Now you want to record a video of it. Not a big deal, you can fire up a screen capture software that churns out a video file and be done with it. But what if you wanted to create an HD movie of your animation, and it simply cannot be rendered at higher resolutions because frames start dropping? What if you wanted to put all the quality settings up for the video? What if you wanted to push that particle count to 10 millions?. What if, indeed. What would happen is that you'd get a choppy video at best. At higher resolutions, fillrate is a bottleneck for most canvas-based animations. High quality settings or high number of elements may be only feasible on more powerful hardware. With CCapture.js you can record smooth videos at a fixed framerate for all these situations, because it doesn't run in realtime: it makes the animations run at a given, fixed framerate which can be specified. You can record animations at smooth and consistent 30 or 60fps even if each frame takes seconds to render. You can even take a 240fps capture and create motion blur with post-production software. The only requirement is that you step your values per frame according to elapsed time. In other words, don't increment your variables with a fixed value each frame, but use an elapsed time delta to adjust those increments. CCapture.js works by hooking the common methods for obtaining that elapsed time: Date.now(), setTimeout, requestAnimationFrame, etc. and making them behave like a constant time step is happening, fixed by the specified framerate.