HTML5 canvas inspector?

Asked 4/2, 2012 at 18:18 Answered 22/1, 2013 at 19:53

Solved html canvas 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.

Kauppi answered 4/2, 2012 at 18:18 Comment(4)

JavaScript is not HTML. I updated your question. – Homans 4/2, 2012 at 18:22

Google Chrome's Profile tab under Developer Tools (Ctrl+Shift+J) might do the trick. I've never tried with canvas though. – Hohenzollern 4/2, 2012 at 18:23

@minitech: The profiles tab lets you look at JavaScript CPU and heap usage; it doesn't really have anything to do with what's rendered on-screen. – Waterfall 4/2, 2012 at 18:26

@josh3736: Sorry, I thought the OP meant canvas profiling, never mind :P – Hohenzollern 4/2, 2012 at 18:28

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

In Chrome Canary:

in your browser, enter this url chrome://flags/
enable Enable Developer Tools experiments
relaunch Chrome
in the developer tools, click the gear to bring up developer preferences
select experiments from the menu
select Canvas Inspections
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

Astral answered 22/1, 2013 at 19:53 Comment(7)

is there a reason why this would miracoluously disappear? I had it working in both canary and vanilla, one day poof. Dev tools experiments still enabled, no profiler, no canvas inspections? – Plant 18/4, 2015 at 3:35

@Astral can you please let me know what is 'gear' and where and how I can find it. When open developer tools it opens up elements inspect window. where and what is 'gear'? – Leveille 22/5, 2015 at 13:37

@Alex - in the latest version of Canary this means Settings the 3 vertical dots in top right corner (or use F1). – Array 14/1, 2016 at 20:8

as @Plant pointed out this doesn't seem to be available in the latest versions - I cannot see this in 49.0.2621.0 canary (64-bit). I think Firefox Canvas debugger might work kind-of-okay... but it will be nice to get this back – Array 14/1, 2016 at 20:10

I'm not able to find the "Enable Developer Tools experiments" option in latest version of chrome, maybe it's name is changed, please help me find the alternate option to use canvas inspect. – Ludwick 7/7, 2020 at 23:8

As of 4/26/21, Canvas Inspections is no longer an option under Experiments. – Vesuvian 26/4, 2021 at 16:45

So they just removed it without any notification? – Pteridophyte 18/10, 2021 at 19:40

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.

Hebetate answered 4/2, 2012 at 18:38 Comment(4)

Canvas is bitmap: it's content is only what you see on the screen – Cerated 4/2, 2012 at 19:39

Not quite sure what the last comment was in aid of, thanks @Hebetate - that's great for debugging! – Viradis 10/10, 2012 at 22:9

This might not be what the OP wanted but it's exactly what I needed, thank you! – Mcentire 4/9, 2020 at 19:1

This have to be the accepted answer! – Portland 28/9, 2021 at 9:50

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.

Variorum answered 4/2, 2012 at 19:40 Comment(1)

Correct.. there no browsers to support canvas inspection yet.. only one way to use right framework like Kohana – Kauppi 29/2, 2012 at 10:5

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

Cornstalk answered 4/2, 2012 at 18:50 Comment(0)

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.

Dayle answered 4/2, 2012 at 19:37 Comment(1)

Hi @sysop, I am not able to find this in chrome settings, not sure if google has changed it. pl. let me know – Vivacity 17/2, 2020 at 10:29

Recommended topics

Hot tags