tehbeard/minecraft-head-canvas.html

## minecraft-head-canvas.html
<!DOCTYPE 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: 320px;
    height: 320px;
    /*border: 2px solid black;*/
  }
  </style>
</head>
<body>
<canvas class='player-head changeable' data-name='Tehbeard' data-hat='true'>
</canvas>

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

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

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

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

<script src='https://gist.github.com/tehbeard/5573217.js'></script>

<script>
function loadPlayerHead(canvasObj){
      plr = $(canvasObj).data('name');
      var hat = (typeof $(canvasObj).attr('data-hat')  =='undefined') ? false : ($(canvasObj).attr('data-hat')=='true');

      console.log(plr);
      console.log(hat);
      jqe = $(canvasObj);

      var img = new Image();

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

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

        for(x in context){
    if(x.indexOf('ImageSmoothingEnabled')!=-1){
      context[x] = false;
    }
  }

        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))
        console.log(hat);
        if(hat == true){
          context.drawImage(img,sx,sy,sw,sh,x,y,w,h);
          context.drawImage(img, 40, 8, 8, 8, 0, 0, canvasObj.width, canvasObj.height);
        }
        else
        {
          context.drawImage(img,sx,sy,sw,sh,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>
	<!DOCTYPE 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: 320px;
	height: 320px;
	/border: 2px solid black;/
	}
	</style>
	</head>
	<body>
	<canvas class='player-head changeable' data-name='Tehbeard' data-hat='true'>
	</canvas>

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

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

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

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

	<script src='https://gist.github.com/tehbeard/5573217.js'></script>

	<script>
	function loadPlayerHead(canvasObj){
	plr = $(canvasObj).data('name');
	var hat = (typeof $(canvasObj).attr('data-hat') =='undefined') ? false : ($(canvasObj).attr('data-hat')=='true');

	console.log(plr);
	console.log(hat);
	jqe = $(canvasObj);

	var img = new Image();

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

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

	for(x in context){
	if(x.indexOf('ImageSmoothingEnabled')!=-1){
	context[x] = false;
	}
	}

	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))
	console.log(hat);
	if(hat == true){
	context.drawImage(img,sx,sy,sw,sh,x,y,w,h);
	context.drawImage(img, 40, 8, 8, 8, 0, 0, canvasObj.width, canvasObj.height);
	}
	else
	{
	context.drawImage(img,sx,sy,sw,sh,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>