akdetrick/x-origin-canvas.html

## x-origin-canvas.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>x-origin</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <br>
  <textarea id="data" style="width: 260px; height:260px"></textarea>
  <script>


var can = document.getElementById('canvas');
var ctx = can.getContext('2d');


var img = new Image();
img.onload = function(){
console.log('loaded');
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
  try {
    data.value = ctx.getImageData(0,0,10,10);
  } catch (e) {
    data.value = e.message;
  }
};
img.crossOrigin = "anonymous";

img.src = 'http://lorempixel.com/260/260/';


  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>x-origin</title>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<br>
	<textarea id="data" style="width: 260px; height:260px"></textarea>
	<script>


	var can = document.getElementById('canvas');
	var ctx = can.getContext('2d');


	var img = new Image();
	img.onload = function(){
	console.log('loaded');
	can.width = img.width;
	can.height = img.height;
	ctx.drawImage(img, 0, 0, img.width, img.height);
	try {
	data.value = ctx.getImageData(0,0,10,10);
	} catch (e) {
	data.value = e.message;
	}
	};
	img.crossOrigin = "anonymous";

	img.src = 'http://lorempixel.com/260/260/';


	</script>

	</body>
	</html>