TAG
JavaScript
Result
Run
License
<h3>Original image</h3> <p>Please rollover on image.</p> <img id="origin-img" src="https://resrc.devdic.com/img/bysize/below_200/01.png" /> <h3>New Bitmap</h3> <canvas id="mycanvas" width="210" height="210"></canvas>
window.addEventListener("load", function() { const elOriginImg = document.getElementById("origin-img"); const elCanvas = document.getElementById("mycanvas"); const context = elCanvas.getContext("2d"); const elImg = new Image(100, 90); elImg.src = "https://resrc.devdic.com/img/bysize/below_200/01.png"; elImg.onload = function() { elOriginImg.addEventListener("mousemove", e => { context.clearRect(0, 0, elCanvas.width, elCanvas.height); let sx = e ? e.offsetX : 0; let sy = e ? e.offsetY : 0; createImageBitmap(elImg, sx, sy, 100, 100) .then(img => context.drawImage(img, 0, 0)); }); elOriginImg.dispatchEvent(new Event("mousemove")); }; });
Console
expand_less
License
License
by DevDic
Close