Canvasでくり抜いて表示(clip)
canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); // 背景を黒で塗りつぶす ctx.beginPath(); ctx.rect(0, 0, 400, 400); ctx.fillStyle = "rgb(0,0,0)"; ctx.fill(); ctx.closePath(); // 円形のクリッピングパスを生成 ctx.beginPath(); ctx.arc(200, 200, 150, 0, Math.PI * 2, false); ctx.clip(); var img = new Image(); img.src = "./test.jpg"; img.onload = function() { ctx.drawImage(img, 0, 50); }