CODEWITHSUNDEEP
javascripthtml5-canvas
Svish
Svish

Reputation: 158051

Is there a way to use any element as a canvas?

Examples I see using <canvas> always have an actual canvas element in the HTML. Say I for example already have a <header> element that I would like to draw on, is there a way to use it as a canvas directly? Or do I need to add that canvas element and make sure it's filling the header?

Upvotes: 0

Views: 156

Answers (1)

Frederik.L
Frederik.L

Reputation: 5620

I was skeptical at first, but there is one way to achieve almost that, by using css and getCSSCanvasContext() with the webkit. This allows you to display a canvas as a background so you can control it like a canvas.

Ex:

HTML

<header></header>

CSS

header { background: -webkit-canvas(fooBar); }

JavaScript (when document ready / onload)

function fillCanvas(w, h) {
   var ctx = document.getCSSCanvasContext('2d', 'fooBar', w, h);

   // draw into canvas
}

A complete example and more specs are given here.

Hope this is convenient.

Upvotes: 1

Related Questions