<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="410"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")
var img = new Image();
img.src = "img/a11.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
document.onmousemove = function(e) {
var ev = e || window.event;
var x = ev.clientX;
var y = ev.clientY;
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, x - 25, y - 25, 50, 50, x - 50, y - 50, 100, 100);
// ctx.globalCompositeOperation = "destination-atop";
// ctx.beginPath();
// ctx.arc(x, y, 50, 0, Math.PI * 2, true);
// ctx.fill();
}
}
</script>
</body>
</html>