1743851-1.html (1206B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <script> 6 7 const spriteSheet = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALBAMAAACEzBAKAAAAFVBMVEUAAADMr3z///8PDw9AQEC/v7/w8PCtfkxVAAAAA3RSTlMAAAD6dsTeAAAAQ0lEQVQIWy3IQRGAIAAEwJ1zCEAFLEAUK5iPClaggj9rMH7Y57prrR0pOJB1kU58OIldsSt2BQVHaIN3Rnt4p2SwJj863A7yxMyt/AAAAABJRU5ErkJggg==' 8 9 const loadImage = (src) => { 10 return new Promise((resolve, reject) => { 11 var img = new Image() 12 img.onload = () => resolve(img) 13 img.onerror = () => reject(false) 14 img.src = src 15 }) 16 } 17 18 let cursorImage 19 20 function drawTestImage(canvasID, alphaValue) { 21 const ctx = document.getElementById(canvasID).getContext("2d", { alpha: alphaValue }) 22 23 ctx.fillStyle = "#808080" // For contrast 24 ctx.fillRect(0, 0, 30, 30) 25 26 createImageBitmap(cursorImage, 0, 0, 8, 11, { premultiplyAlpha: "none" }).then(image => { 27 ctx.drawImage(image, 10, 10) 28 }) 29 } 30 31 window.addEventListener("DOMContentLoaded", () => { 32 loadImage(spriteSheet).then(img => { 33 cursorImage = img 34 drawTestImage("c0", false) 35 }) 36 }) 37 38 </script> 39 </head> 40 <body> 41 <canvas id="c0" width="30" height="30"></canvas> 42 </body> 43 </html>