CODEWITHSUNDEEP
htmlcanvashtml5-canvasinspector
mastak
mastak

Reputation: 1467

HTML5 canvas inspector?

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.

Upvotes: 45

Views: 58794

Answers (5)

Simon Sarris
Simon Sarris

Reputation: 63862

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 Gentle Introduction to Making HTML5 Canvas Interactive, and no doubt if you search you'll find other tutorials.

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.

Upvotes: 12

jedierikb
jedierikb

Reputation: 13109

EDIT: this answer doesn'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

Upvotes: 46

sysop
sysop

Reputation: 810

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.

Upvotes: 2

rezoner
rezoner

Reputation: 1967

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

Upvotes: 2

spliter
spliter

Reputation: 12589

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.

Upvotes: 28

Related Questions