Me gustaría dibujar esta imagen en un lienzo sin las partes transparentes. El principio de mi representación es que recorto imágenes pequeñas de una imagen grande usando el método createImageBitmap y las almaceno en una matriz. Luego los renderizo en el lienzo uno por uno. El problema es que también dibuja innecesariamente las partes transparentes. Entonces, si registro mi matriz, obtengo esto . Dado que mi mapa tiene mosaicos de 10x10, da como resultado 100 imágenes (de las cuales 96 son inútiles). En cambio, me gustaría guardar solo 4 imágenes.

No solo estropea mi rendimiento, sino que tengo más razones por las que me molesta. ¿Hay alguna manera de resolver este problema?

Mi código hasta ahora:

 (async () => { const img = new Image(); img.src = "./img/obstacles.png"; await img.decode(); let tiles = []; let tileWidth = 32; let tileHeight = 32; for (let i = 0; i < 100; i++) { let x = i % 10; let y = Math.floor(i / 10); let bmp = await createImageBitmap(img, x * tileWidth, y * tileHeight, tileWidth, tileHeight); // index.js:13 tiles.push({ bmp, x, y }) } console.log(tiles) const canvas = document.querySelector("canvas"); canvas.width = 320; canvas.height = 320; const ctx = canvas.getContext("2d"); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); tiles.forEach((tile) => { ctx.drawImage(tile.bmp, tile.x * tileWidth, tile.y * tileHeight); }) // requestAnimationFrame(draw) } draw(); })();