Skip to content

An actual useful fork of the console.image. Snapshot the canvas and output it to the console.

Notifications You must be signed in to change notification settings

adriancooney/console.snapshot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 

Repository files navigation

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

Usage

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");

console.snapshot(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");

	// ...
	//draw
	// ...

console.screenshot(canvas);
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.

console.image("http://i.imgur.com/wWPQK.gif");

Troubleshooting

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 corsproxy.com.

License: MIT

About

An actual useful fork of the console.image. Snapshot the canvas and output it to the console.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published