HTML5キャンバスをIMG要素に変換します

Question

キャンバスがIMG要素のように機能するようにHTML5キャンバスのサイズを変更し、引き伸ばしたいと思います。幅-高さをピクセル単位で設定します。

HTML5キャンバスをIMG要素に変換/エクスポートする方法、またはこれをキャンバス上で直接可能にする方法はあるのでしょうか。

詳細については、KineticJSライブラリを使用しています。

助けてください！

Answer 1

まず、キャンバスにIDを指定します（例：example）。次に、プレーンJavaScriptを使用して、そのキャンバスに基づいて画像を作成し、スタイルを設定できます。

var canvas = document.getElementById('example'),
    dataUrl = canvas.toDataURL(),
    imageFoo = document.createElement('img');
imageFoo.src = dataUrl;

// Style your image here
imageFoo.style.width = '100px';
imageFoo.style.height = '100px';

// After you are done styling it, append it to the BODY element
document.body.appendChild(imageFoo);