Есть ли способ использовать любой элемент в качестве холста?

Question

Примеры, которые я вижу с помощью <canvas>, всегда имеют фактический элемент холста в HTML. Скажем, у меня, например, уже есть элемент <header>, на который я хотел бы обратить внимание, есть ли способ использовать его в качестве холста напрямую? Или мне нужно добавить этот элемент canvas и убедиться, что он заполняет заголовок?

Answer 1

Сначала я был настроен скептически, но есть один способ достичь почти, который, используя css и getCSSCanvasContext() с webkit. Это позволяет отображать холст в качестве фона, чтобы вы могли контролировать его, как холст.

Ex:

HTML

<header></header> 

CSS

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

JavaScript (если документ готов/OnLoad)

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

    // draw into canvas 
} 

Полный пример и больше спецификаций даны here.

Надеюсь, это удобно.