HTML5 canvas inspector?

mastak picture mastak · Feb 4, 2012 · Viewed 31.6k times · Source

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

jedierikb picture jedierikb · Jan 22, 2013

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