CSSとJSで要素の背景にcanvas画像を設定する方法

WebKit系とFirefox限定です(IEでは利用できない)。

CSSのbackgroundプロパティにおいて、WebKit系のブラウザにはcanvas()関数、Firefoxではelement()関数という値が指定できます。canvas()関数は、canvasに描画したものを背景に設定できる関数で、element()関数は指定の要素を画像として扱い背景にすることができます(残念ながら、背景にしかできない)。

で、これに関連してWebKit系のブラウザのJavaScriptにはgetCSSCanvasContextメソッド、FirefoxにはmozSetImageElementメソッドというものが用意されています。これは、どちらもブラウザ上でcanvasを作成し、ブラウザ上にcanvasを描画せずにcanvas画像を背景に設定できる機能です(参考：[CSS3] (Webkit専用) CSSを用いて要素の背景にCanvasを指定する – YoheiM .NET、CSSのelement()関数 – Weblog – Hail2u.net)。

関数が違うので、どちらも共通の指定でcanvasの背景画像を作成できるように関数を作ってみました。

function getBgCanvas(id, width, height){
    var ctx = false;
    if(document.getCSSCanvasContext){ // webkit用の指定
        ctx = document.getCSSCanvasContext('2d', id, width, height);
    }else if(document.mozSetImageElement){ // Firefox用の指定
        var canvas = document.createElement('canvas');
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        ctx = canvas.getContext('2d');
        document.mozSetImageElement(id, canvas);
    }
    return ctx;
}

この関数からえたコンテキストを利用すると、WebKit系でもFirefoxでも同じ処理で背景用canvasを取得できます。
利用例は以下のような感じ。

var ctx = getBgCanvas('background', 100, 400);
// ピンクの丸
ctx.beginPath();
ctx.strokeStyle = '#F8C1C6';
ctx.fillStyle = '#F8C1C6';
ctx.arc(50,50,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 白の丸
ctx.beginPath();
ctx.strokeStyle = '#E3D8C4';
ctx.fillStyle = '#E3D8C4';
ctx.arc(50,150,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 緑の丸
ctx.beginPath();
ctx.strokeStyle = '#849865';
ctx.fillStyle = '#849865';
ctx.arc(50,250,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
//茶色い長方形
ctx.fillStyle = '#D8CFAF';
ctx.fillRect(45,300,10,100);

CSSは下記のように書きます。

#bg-canvas{
    background-image: -moz-element(#background);
    background: -webkit-canvas(background);
    height:400px;
}

というわけで、以下実行サンプルです。

正直、そこまで実用性があるわけではなさそうですが、こういうことができるという紹介。IEにも対応したい場合は、canvasのtoDataURLでBase64の画像データを取得して、それをJavaScriptを用いて要素の背景に設定するという方法でできそうです(というより、それでcanvasに対応している全てのブラウザに対応できる)。