The problem is that when i use ctx.drawImage(img,0,0); on a external module, the image generate a incomplete ImageData.
I post the code with resuls
When i put the code of canvas.js in a tag directly on index.html works fine.
What am i doing wrong??
canvas.js
export async function generateFromTile(tileset){
var tiles = new Array();
const loadImage = (url) => new Promise((resolve, reject) => {
const img = new Image();
img.addEventListener('load', () => resolve(img));
img.addEventListener('error', (err) => reject(err));
img.src = url;
});
await loadImage(tileset).then(img => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d",{ willReadFrequently: true });
var tileCount=16,
tileWidth = img.width/tileCount;
ctx.drawImage(img,0,0);
// for(var t=0;t<tileCount;t++){
tiles.push(ctx.getImageData(0,0,1024,1024));
// }
console.log(tiles);
});
return tiles;
}
game.js
import * as canvengine from './canvas.js';
var result = canvengine.generateFromTile('tiles/Grassland.png');
const canvas = document.getElementById("map");
const context = canvas.getContext("2d");
result.then((tileset) =>{
context.putImageData(tileset[0], 0, 0);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="stylesheet" href="css/style-global.css">
</head>
<body>
<script src="js/game.js" type="module"></script>
<script>
</script>
<div class="div-background">
<h1>Proyecto Town</h1>
<canvas id="map" width="1024px" height="1024px"></canvas>
</div>
</body>
</html>
This is the result:
