SaveFrame to disk from a browser canvas
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Render an in-browser canvas application to png sequence file saved to disk using a Node.js script.

npm version


npm install saveframe

Run the server

The server is a Node.js script, you can run it with:

node node_modules/saveframe/server.js <foldername>

where <foldername> is the folder where to put the png files (must be available)

Configure the client

Include the required libraries and use the proper method to interact with the server.

Here a quick sample:

		<script src="node_modules/"></script>
		<script src="node_modules/saveframe/client.js"></script>


		<script type="text/javascript">
			var canvas = document.querySelector('canvas')
			// specify the canvas you want to render to disk

			// draw something on your canvas
			var ctx = canvas.getContext('2d')
			ctx.fillStyle = '#f00'
			ctx.fillRect(20, 20, 100, 100)
			// save the frame to disk (into 'tmp/frame-0.png')

The PNG size will match the canvas size. You can then create a video using the image sequence, Quicktime of other similar tools do this job.

Run the client

To run the client file with the browser use a local webserver of your choice (http-server, browser-sync, python SimpleHTTPServer, whatever...).

You can watch e quick test here with this WelGL canvas: