<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="720" height="720"> </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); canvas.style.background = "url(img/song.jpg) no-repeat"; ctx.fillStyle = "#999"; ctx.globalCompositeOperation = 'destination-over'; ctx.beginPath(); ctx.fillRect(0,0,720,720); ctx.closePath(); canvas.onmousemove = function(ev){ var ev = ev||window.event; var x = ev.pageX-this.offsetLeft; var y = ev.pageY-this.offsetTop; ctx.fillStyle = "#000"; ctx.beginPath(); ctx.globalCompositeOperation = 'destination-out'; ctx.arc(x,y,20,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); } </script> </body> </html>