safhac/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    canvas {
      float: left;
    }
  </style>

</head>
<body>
<canvas id="canvas1"></canvas>
</body>
<script>

  var canvas1 = document.getElementById('canvas1');
  var ctx1 = canvas1.getContext('2d');

  var current, savedX, savedY;

  var img = new Image();
  img.src = 'rhino.png';
  img.style.display = 'none';

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

  canvas1.width = canvas1.height = 300;

  canvas1.addEventListener('mousedown', function(event){

    savedX = event.layerX;
    savedY = event.layerY;

    current = ctx1.getImageData(Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);

    var image = new Image();

    createImageBitmap(current, 0, 0, 75, 75)
      .then(function(sprite){

        ctx1.save();
        ctx1.beginPath();
        ctx1.arc(savedX, savedY, 50, 0, Math.PI * 2);
        ctx1.clip();
        ctx1.drawImage(sprite, Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);
    });

    ctx1.restore();
  });

  canvas1.addEventListener('mouseup', function(event){
    ctx1.clearRect(Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);
    ctx1.putImageData(current, Math.abs(savedX - 50), Math.abs(savedY - 50));

  });


</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	canvas {
	float: left;
	}
	</style>

	</head>
	<body>
	<canvas id="canvas1"></canvas>
	</body>
	<script>

	var canvas1 = document.getElementById('canvas1');
	var ctx1 = canvas1.getContext('2d');

	var current, savedX, savedY;

	var img = new Image();
	img.src = 'rhino.png';
	img.style.display = 'none';

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

	canvas1.width = canvas1.height = 300;

	canvas1.addEventListener('mousedown', function(event){

	savedX = event.layerX;
	savedY = event.layerY;

	current = ctx1.getImageData(Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);

	var image = new Image();

	createImageBitmap(current, 0, 0, 75, 75)
	.then(function(sprite){

	ctx1.save();
	ctx1.beginPath();
	ctx1.arc(savedX, savedY, 50, 0, Math.PI * 2);
	ctx1.clip();
	ctx1.drawImage(sprite, Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);
	});

	ctx1.restore();
	});

	canvas1.addEventListener('mouseup', function(event){
	ctx1.clearRect(Math.abs(savedX - 50), Math.abs(savedY - 50), 100, 100);
	ctx1.putImageData(current, Math.abs(savedX - 50), Math.abs(savedY - 50));

	});



	</script>
	</html>