HTML5のcanvasの中身をコピー

2015-04-18

先ほどの記事に引き続いてHTML5のcanvasです。お絵描きをしたcanvasの中身を別のcanvasにコピーしよう、と言う感じ。

とりあえずサンプル。

左のカンバスは絵を描ける。コピーってボタンをクリックすると内容をコピーできる。

<html>
    <canvas width=320 height=240 style="border: 1px solid black" id=alpha></canvas>
    <canvas width=320 height=240 style="border: 1px solid black" id=beta></canvas>
    <button>コピー</button>

    <script>
        var alpha = document.querySelector('#alpha');
        var beta = document.querySelector('#beta');
        var context = alpha.getContext('2d');

        alpha.addEventListener('mousedown', function(ev){
            context.beginPath();
            context.moveTo(ev.offsetX, ev.offsetY);
        });

        alpha.addEventListener('mousemove', function(ev){
            if(ev.which){
                context.lineTo(ev.offsetX, ev.offsetY);
                context.stroke();
            }
        });

        document.querySelector('button').addEventListener('click', function(ev){
            var image = context.getImageData(0, 0, alpha.width, alpha.height);
            beta.getContext('2d').putImageData(image, 0, 0);
        });
    </script>
</html>

ソースコードはこんな。 contextのgetImageDataでカンバスの中身を画像化して、そいつをputImageDataで貼り付ける。結構お手軽？

2023-08-18 追記

2023年現在の環境で動くように若干コードを修正しました。

修正前は ev.layerX / ev.layerY を使用していたものを、 ev.offsetX / ev.offsetY を使用するように変更してあります。