0

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?

Svish
  • 152,914
  • 173
  • 462
  • 620
  • Nope. Other html elements do not have the html5 canvas' capabilities. Just add an actual canvas element as a child of your header. – markE Sep 20 '16 at 23:24

1 Answers1

1

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.

Community
  • 1
  • 1
Frederik.L
  • 5,522
  • 2
  • 29
  • 41
  • Upvote for an interesting alternative, but you might as well CSS position an actual canvas element under or put a canvas element inside the header. – markE Sep 21 '16 at 02:23
  • From chrome 46 this was removed. See https://bugs.chromium.org/p/chromium/issues/detail?id=475655 though `-moz-element` may still be around dont rely on it. You can set the background to a rendered canvas via `canvas.toDataURL` and css `URL("url");` though it is slow. – Blindman67 Sep 21 '16 at 20:17