I've been struggling with a tilemap rendering issue in my HTML 5 Canvas game. For some reason, the map appears flipped both vertically and horizontally despite all my efforts to fix it using JavaScript.
Here's my code:
import Map from './MapClass.js';
export var miniMapScale = .5;
var MiniMap = document.createElement("canvas");
document.body.appendChild(MiniMap);
MiniMap.width = miniMapScale * 640;
MiniMap.height = miniMapScale * 640;
MiniMap.id = "TopDownView";
var ctx = MiniMap.getContext("2d");
var TestMap = new Map([
[1,1,1,1,1,1,1,1,1,1],
[1,0,1,0,0,0,0,0,0,1],
[1,0,1,0,0,0,0,0,0,1],
[1,0,1,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1]
]);
function drawTopDownMap() {
ctx.clearRect(0, 0, MiniMap.width, MiniMap.height);
TestMap.draw();
requestAnimationFrame(drawTopDownMap);
};
requestAnimationFrame(drawTopDownMap);
And here's the Map Class code:
import { miniMapScale } from './index.js';
export default class Map{
constructor(mapData) {
this.data = mapData;
this.tileSize = miniMapScale * 64;
this.width = this.data[0].length;
this.height = this.data.length;
this.ctx = document.getElementById("TopDownView").getContext("2d");
};
draw() {
for(var y = 0; y <this.height; y++) {
for(var x = 0; x <this.width; x++) {
var wall = this.data[x][y];
if(wall == 0) {
this.ctx.fillStyle ="#ffe4c4";
this.ctx.fillRect(
x * this.tileSize,
y * this.tileSize,
this.tileSize, this.tileSize
);
}else if(wall == 1) {
this.ctx.fillStyle ="#000000";
this.ctx.fillRect(
x * this.tileSize,
y * this.tileSize,
this.tileSize, this.tileSize
);
};
};
}
}
};
If anyone has any suggestions on how to resolve this issue, I would be extremely grateful!