What is the getCSSCanvasContext() method? I saw it in Chrome’s debuging console, but I cannot find any decent documentation for it.

Does it mean we can draw using canvas commands on any element?

What is the getCSSCanvasContext() method? I saw it in Chrome’s debuging console, but I cannot find any decent documentation for it.

Does it mean we can draw using canvas commands on any element?

• javascript
• html
• canvas

• It's worth noting that this method is deprecated in recent chrome builds and is probably going to be removed: groups.google.com/a/chromium.org/forum/#!topic/blink-dev/… – 1800 INFORMATION Commented Jan 25, 2016 at 2:13

2 Answers 2

The method is implemented in WebKit (meaning you can also use it in Safari) and returns an object that lets you draw into a CSS image. See this blog post for an example:

In the latest nightlies, you can try out a new feature: the ability to specify named image buffers in CSS and then to draw into them programmatically from JavaScript. Here’s how it works.

background: -webkit-canvas(mycanvas);

Instead of specifying an image URL, you specify a canvas and an identifier to use for that canvas. The following new API on documents can then be used to obtain a drawing context for that canvas.

CanvasRenderingContext getCSSCanvasContext(in DOMString contextType, in DOMString identifier, in long width, in long height);

also don't use ctx.clearRect(0, 0, w, h); for IE9 - it doesn't work after this code if you try to draw something after clearRect() you will get empty canvas anyway