HTML5 canvas inspector?

Question

Is there any ability to inspect the objects rendered on a HTML5 canvas like we can do in Silverlight with Silverlight Spy ?

If I use Chrome elements inspector I can inspect only DOM.

Answer 1

EDIT: this answer don't work on new chrome versions see: chrome canvas inspector 2015

In Chrome Canary:

1. in your browser, enter this url chrome://flags/
2. enable Enable Developer Tools experiments
3. relaunch Chrome
4. in the developer tools, click the 'gear' to bring up developer preferences
5. select experiments from the menu
6. select Canvas Inspections
7. close devtools, refresh the page, reopen devtools

---

The full guide on the canvas profiler: http://www.html5rocks.com/en/tutorials/canvas/inspection/

Animated gif showing it in action: https://twitter.com/umaar/status/480705624448045057

Answer 2

Canvas' content is not part of the DOM, so there is no way you could inspect it's content. As you have correctly pointed, inspectors can inspect DOM only, hence canvas is out of it's scope. You can check the contents of the canvas in the console of your devtools though with

yourcanvas.toDataURL();

and check the output dataURL in the neighbouring tab.

Answer 3

There are no objects rendered on an HTML5 Canvas. There are only pixels. When you draw a shape the canvas waves its wand, pixels appear, and then it forgets that anything even happened.

As many have done, you can keep track of what you draw on a Canvas in order to have persistent objects for redrawing. I've written a few popular tutorials on that and no doubt if you search you'll find more.

As you build up your system of persistent objects you'll almost certainly want to include a lot of debug code that outputs easy to understand lists of objects and their coordinates. A lot of people choose to do this with console.log statements that will output whatever strings you want to the developer console (part of the F12 developer tools in most modern browsers).

But that's it. What you build is what you get to use to inspect things.

Answer 4

There is no way to inspect the canvas content at the moment, But in case of WebGL you can use " WebGL Inspector " extension for Google Chrome, so I think it is possible to make similar extension for Canvas too. but it doesn't work like common DOM inspectors.

Here is the WebGL Inspector features:

• Extension for injecting into pages
• Embed in an existing application with a single script include
• Capture entire GL frames
• Annotated call log with stepping/resource navigation and redundant call warnings
• Pixel history - see all draw calls that contributed to a pixel + blending information
• GL state display
• Resource browsers for textures, buffers, and programs

Let's hope I'm not off-road, but there is no Bitmap or Vector Canvas inspector at the moment.

Answer 5

Treat canvas as ms paint. There are no objects, there are only pixels and methods to put them on screen.