Inspect canvas elements

Q: Can Chrome DevTools inspect a canvas element?

DevTools shows the canvas tag and its width and height attributes, but not its context type, its pixel ratio or the colors it draws. Screen Ruler shows all of these in one panel when you click the canvas.

Q: How do I tell if a canvas uses WebGL?

Select it with Screen Ruler and look at Context Type in the Canvas section. It reads webgl or webgl2 for WebGL canvases and 2d for ordinary 2D drawings.

Select a canvas on any page and see whether it is 2D or WebGL, how many pixels it really draws, whether it is sharp on high density screens, and which colors it uses.

What it shows

A <canvas> tag tells you almost nothing in DevTools. You see the element and its attributes, but not what kind of drawing it holds or how it is set up. Select a canvas with Screen Ruler and the Canvas section in the side panel's Element tab shows:

Context Type: which drawing API the canvas uses, such as 2d, webgl, webgl2 or bitmaprenderer. This tells you straight away whether you are looking at a 2D drawing, a chart library's output or a 3D scene.
Canvas Dimensions: the size of the drawing surface in real pixels, for example 1600 × 800. This is often different from the size the canvas takes up on the page.
Pixel Ratio: real canvas pixels per CSS pixel of displayed width, for example 2x.

The main colors drawn on the canvas also appear in the Colors section, under Backgrounds, next to the element's CSS colors, so you can copy them like any other color.

How to inspect a canvas

Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option + Shift + S on a Mac).
Click the canvas to select it. If something sits on top of it, select that element and press Alt + Shift + Up or Down to move through parents and children until the canvas is selected.
Read the Canvas section in the side panel. The rest of the panel, from the box model to computed CSS, works for the canvas as for any element.

Reading the pixel ratio

The pixel ratio is the most useful number for spotting a common bug. On a Retina or other high density screen, a canvas needs about two or three real pixels for every CSS pixel to look sharp. If Screen Ruler reports 1x on such a screen, the canvas is being stretched and charts, text and lines inside it will look soft. A ratio that matches your screen means the page has set the canvas up correctly. Values are rounded to two decimals, so a slightly odd ratio such as 1.33x also shows up clearly.

How the colors are found

Screen Ruler copies the current frame of the canvas into a small 64 by 64 sample and counts the colors in it. Similar shades are grouped so a gradient or anti-aliased edge does not turn into dozens of near identical entries, colors that cover less than one percent of the sample are dropped, and mostly transparent pixels are ignored. You get up to 25 distinct colors, the most common first.

Limits

Cross-origin canvases. When a canvas has drawn an image from another domain without permission, the browser blocks reading its pixels. The context type, size and pixel ratio still show, but no colors are listed.
WebGL colors. Many WebGL scenes clear their drawing buffer after each frame, so sampling can come back empty even though the scene is visible. Use the Color Picker to sample those pixels from the screen instead.
Canvases handed to a worker. When a page moves drawing to a worker with OffscreenCanvas, the context cannot be queried, so no context type is shown.
Not a drawing debugger. Screen Ruler does not record or replay draw calls. It shows how a canvas is set up and what it currently holds.

When it is useful

Blurry charts and maps. Check the pixel ratio to confirm whether a soft looking chart is a missing high density setup.
Working out how something is built. Find out whether a hero animation, game or data visualization uses 2D or WebGL before you try to rebuild it.
Matching colors. Pull the palette out of a chart or illustration drawn on a canvas, where there is no CSS to read. For page wide colors, see Color Palette or the guide on extracting a color palette.
Checking sizes. Compare the canvas's real pixel size with its displayed size, measured with Inspect Element, to catch canvases drawing far more pixels than they need.

Inspect Canvas is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

Can Chrome DevTools inspect a canvas element?

DevTools shows the canvas tag and its width and height attributes, but not its context type, its pixel ratio or the colors it draws. Screen Ruler shows all of these in one panel when you click the canvas.

How do I tell if a canvas uses WebGL?

Select it with Screen Ruler and look at Context Type in the Canvas section. It reads webgl or webgl2 for WebGL canvases and 2d for ordinary 2D drawings.

Why does my canvas look blurry?

Usually because its pixel ratio is lower than your screen's. If Screen Ruler shows a Pixel Ratio of 1x on a high density display, the canvas is drawing at half the resolution it needs and the browser is stretching it.

Why are no colors listed for a canvas?

Either the canvas has drawn content from another domain, which blocks reading its pixels, or it is a WebGL canvas whose buffer is cleared between frames. The Color Picker can still sample any visible pixel.