Cópia - Canvas Para Img

Cópia do dados do canvas para uma imagem DOM

by Alexandre Gomiero de Oliveira

HTML

<table>
<tr>
<td>
<p>Canvas (Origem)</p>
<canvas id="canvas" width="300" height="300"></canvas>
</td><td>
<p>Imagem (Destino)</p>
<img id="imagem" width="300" height="300" />
</td>
</tr>
<tr>
<td colspan="2"><button onclick="copiaCanvas();">Copia Para Imagem</button></td>
</tr>
</table>

JavaScript

var canvas = document.getElementById('canvas');
var imagem = document.getElementById('imagem');

window.desenha = function()
{
	var ctx = canvas.getContext('2d');
  ctx.strokeStyle = '#0000FF';
	ctx.rect(10, 10, 280, 280);
  ctx.fillRect(30, 30, 240, 240);
  ctx.stroke();
}

window.copiaCanvas = function()
{
	var data = canvas.toDataURL();
  imagem.setAttribute( 'src', data);
}

desenha();