CanvasをSVGで利用する方法

HTML5を使っていると、Canvasの内容をSVGに書きだしたり、逆にSVGの内容をCanvasに書きだしたりしたくなることがあります。今回はその方法のうち、CanvasをSVGで利用する方法をお伝えします。

（SVGをCanvasで利用する方法はこちら）

CanvasをSVGで利用するのは、contgextのtoDataURLを使って実装することが出来ます。

<!DOCTYPE html>
<html><head><title>Canvasの内容をSVGに出力する</title>
<script>
(function() {
    var width = 400, height = 300;
    // SVGのnamespace付きでElementを作成する
    var createElement = function(tag, attributes) {
        var ret = document.createElementNS("http://www.w3.org/2000/svg", tag);
        if(ret && attributes) {
            for(var key in attributes) {
                var value = attributes[key];
                ret.setAttribute(key, value);
            }
        }
        return ret;
    };
    // randomの値を返す
    var random = function(max) {
        return Math.floor(Math.random() * max);
    };
    window.onload = function() {
        var svg = createElement("svg", {width: width, height: height});
        document.body.appendChild(svg);
        var defs = createElement("defs");
        svg.appendChild(defs);
 
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        for(var i = 0; i < 10000; i++) {
            var x = random(width), y = random(height);
            ctx.fillStyle = "rgb(" + random(256) + "," + random(256) + "," + random(256) + ")";
            ctx.fillRect(x, y, random(width - x), random(height - y));
        }
 
        // fill用にpatternを作成
        var pattern = createElement("pattern",  {id: "img", x: 0, y: 0, width: width, height: height, patternUnits:"userSpaceOnUse"});
        defs.appendChild(pattern);
        // patternに使うimageを作成
        var image = createElement("image", {x: 0, y: 0, width: width, height: height});
        image.setAttributeNS("http://www.w3.org/1999/xlink", "href", canvas.toDataURL());
        pattern.appendChild(image);
 
        // 角丸の四角形を作り、上のパターンで塗りつぶす
        var rect = createElement("rect", {x: 0, y: 0, width: width, height: height, rx: 50, ry: 50, fill: "url(#img)"});
        svg.appendChild(rect);
    };
})();
</script></head>
<body>
</body></html>

簡単なコードの解説をします。

今回は、SVGをJavaScriptで生成しています。SVGの名前空間でエレメントを作成する関数が7～16行目です
22行目から25行目で、SVGを作ってbodyに追加しています。これでSVGが表示されます
27行目から35行目でCanvasを作成し、適当な画像を生成しています。このCanvasをSVGに利用する予定です
37～39行目で、patternの設定をしています。ここで設定したパターンをdefsに登録し、後に塗りスタイルで使います
40～43行目が、Canvasの内容をSVGに利用しているところです。imageタグを作成し、そのhrefにCanvasのtoDataURLを指定しています。実際のSVGの中では、
```
<image x="0" y="0" width="400" height="300" xlink:href="data:image/png;base64,～"></image>
```
という形になります。xlinkのnamespaceを適用するのを忘れないようにしましょう。</li>
46行目で、実際にその画像を使って、角丸の四角形を描画しています。

これの実行結果はこちらになります。