An actual useful fork of the console.image. Snapshot the canvas and output it to the console.
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.

console.snapshot( canvas )

A simple canvas profiler

console.snapshot takes and inputted <canvas> element and outputs a snapshot of it into the console. It makes debugging the canvas a little less dramatic. See this demo. console.snapshot is a fork of the console.image and actually does something useful.

The demo


console.snapshot( <canvas> )

console.snapshot profiles a canvas for 1 iteration in the browser render loop or for one requestAnimationFrame tick and outputs the canvas context call stack and state changes to the console.

var canvas = document.getElementById("canvas");


Sample output;

console.screenshot( <canvas> [, <scale> ] )

console.screenshot takes in a HTMLCanvasElement, base64 encodes it using toDataURL and then outputs it to the canvas using console.image. You can also pass along an optional scale factor to scale down the outputted image for better viewing within the Dev tools.

var canvas = document.createElement("canvas"),
	ctx = canvas.getContext("2d");

	// ...
	// ...

console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size

Screenshot demo

console.image( <url> )

console.image outputs an image from a url into the console. See console.image.



I'm getting "Uncaught Error: SecurityError: DOM Exception 18" when I try to snapshot the canvas.

This is caused by printing a non CORS-enabled image on the canvas. The browser blocks the toDataURL function which is what console.image depends on to print the canvas. To fix this, see this tutorial on HTML5Rocks or consider passing your image through a CORS proxy such as

License: MIT