Canvas CORS

by franklinjavier

HTML

<canvas id="canvas" width="450" height="250"></canvas>
<button>Gerar imagem</button>
<img width="450" height="250" src="" />

CSS

canvas, img { float: left; }

JavaScript

var canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	button = document.querySelectorAll('button')[0],
	clone = document.querySelectorAll('img')[0],
	img = new Image(),
	hash;

img.onload = function (e) {
    context.drawImage(img, 0, 0);
};

hash = canvas.toDataURL();
img.src = 'http://sphotos-d.ak.fbcdn.net/hphotos-ak-ash3/s480x480/10101_443077562436757_253631818_n.jpg';

button.addEventListener('click', function () {
    clone.src = hash;
});