複数のCanvasを結合し、1つの画像として保存したい

Question

現在プライベートでhtml5のCanvasを勉強しています。

そこで困っていることがあります。

結論から言うと、

複数のCanvasを結合し、１つの画像として保存するにはどうしたらいいでしょうか？

Canvasで描いた図形を画像に変換し、保存することはできました。

しかし、複数のCanvasタグを並べ、そこに描いた図形を結合し、それを1枚の画像として保存したいのです。

もしわかる方がいればよろしくお願いします。

Answer 1

canvas.toDataURLメソッドで、contextの現状態をdataURIで取得できます。
結合用の新しいcanvasを作成し、取得したdataURIをcanvas.drawImageで結合できます。

下記コードはcontext1,context2,context3にそれぞれテキストを描写し、context4に結合します。

DEMO

var createImage= function(context){
  var image= new Image
  image.src= context.canvas.toDataURL()
  return image
}

var context1= document.createElement('canvas').getContext('2d')
context1.fillText('foo',0,10)

var context2= document.createElement('canvas').getContext('2d')
context2.fillText('bar',0,20)

var context3= document.createElement('canvas').getContext('2d')
context3.fillText('baz',0,30)

var context4= document.createElement('canvas').getContext('2d')
context4.drawImage(createImage(context1),0,0)
context4.drawImage(createImage(context2),0,0)
context4.drawImage(createImage(context3),0,0)

document.body.appendChild(createImage(context4))

Comments

[k499778]

horse_n_deerさん
返答ありがとうございます。
理想としていた形ができました。
感謝しています。