tehbeard/gist:5573217

## gistfile1.html
<html>
<head>
  <title>Minecraft heads using Canvas 2D</title>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
  <style>
  canvas{
    width: 320;
    height: 320;
    /*border: 2px solid black;*/
  }
  </style>
</head>
<body>
<canvas class='player-head changeable' data-name='Tehbeard'>
</canvas>

<canvas class='player-head' data-name='Dinnerbone'>
</canvas>

<canvas class='player-head' data-name='jeb_'>
</canvas>

<canvas class='player-head' data-name='Etho'>
</canvas>

<br/>
<input class="name" type="text" /><button class="change">Change head</button>


<script>
//Disable anti aliasing using vendor flags
function setSharp(context){
  for(x in context){
    if(x.indexOf("ImageSmoothingEnabled")!=-1){
      context[x] = false;
      return;
    }
  }
}

function loadPlayerHead(canvasObj){
  plr = $(canvasObj).data('name');
      console.log(plr);
      jqe = $(canvasObj);
      jqe.attr('width',jqe.css('width'));
      jqe.attr('height',jqe.css('height'));

      var img = new Image();

      img.onload = function() {
        // draw cropped image

        context = canvasObj.getContext('2d');

        setSharp(context);

        sx = 8;
        sy = 8;
        sw = 8;
        sh = 8;

        x = ((canvasObj.width/8) / 2);
        y = ((canvasObj.height / 8) / 2);
        w = canvasObj.width - ((canvasObj.width / 8));
        h = canvasObj.height - ((canvasObj.height / 8))

        context.drawImage(img,sx,sy,sw,sh,x,y,w,h);
        context.drawImage(img, 40, 8, 8, 8, 0, 0, canvasObj.width, canvasObj.height);


      };
      img.src = 'http://minecraft.net/skin/' + plr + '.png';
}
$(function(){

  $('.change').click(function(){
    $("canvas.changeable").data('name',$(".name").val());
    loadPlayerHead($("canvas.changeable")[0]);
  });

  $('canvas.player-head').each(function(i,e){
    loadPlayerHead(e);
  });


});
    </script>
</body>
</html>
	<html>
	<head>
	<title>Minecraft heads using Canvas 2D</title>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
	<style>
	canvas{
	width: 320;
	height: 320;
	/border: 2px solid black;/
	}
	</style>
	</head>
	<body>
	<canvas class='player-head changeable' data-name='Tehbeard'>
	</canvas>

	<canvas class='player-head' data-name='Dinnerbone'>
	</canvas>

	<canvas class='player-head' data-name='jeb_'>
	</canvas>

	<canvas class='player-head' data-name='Etho'>
	</canvas>

	<br/>
	<input class="name" type="text" /><button class="change">Change head</button>


	<script>
	//Disable anti aliasing using vendor flags
	function setSharp(context){
	for(x in context){
	if(x.indexOf("ImageSmoothingEnabled")!=-1){
	context[x] = false;
	return;
	}
	}
	}

	function loadPlayerHead(canvasObj){
	plr = $(canvasObj).data('name');
	console.log(plr);
	jqe = $(canvasObj);
	jqe.attr('width',jqe.css('width'));
	jqe.attr('height',jqe.css('height'));

	var img = new Image();

	img.onload = function() {
	// draw cropped image

	context = canvasObj.getContext('2d');

	setSharp(context);

	sx = 8;
	sy = 8;
	sw = 8;
	sh = 8;

	x = ((canvasObj.width/8) / 2);
	y = ((canvasObj.height / 8) / 2);
	w = canvasObj.width - ((canvasObj.width / 8));
	h = canvasObj.height - ((canvasObj.height / 8))

	context.drawImage(img,sx,sy,sw,sh,x,y,w,h);
	context.drawImage(img, 40, 8, 8, 8, 0, 0, canvasObj.width, canvasObj.height);



	};
	img.src = 'http://minecraft.net/skin/' + plr + '.png';
	}
	$(function(){

	$('.change').click(function(){
	$("canvas.changeable").data('name',$(".name").val());
	loadPlayerHead($("canvas.changeable")[0]);
	});

	$('canvas.player-head').each(function(i,e){
	loadPlayerHead(e);
	});


	});
	</script>
	</body>
	</html>