I am attempting to combine these two images to create a map. Here is an illustration of how they should fit together.
https://i.sstatic.net/zGZgS.png
var testHeightMap =
'x\n' +
'x';
var myCanvas = document.getElementById('game_canvas');
var ctx = myCanvas.getContext('2d');
var image = new Image;
var tilesCycled = 0;
image.onload = function() {
var lines = testHeightMap.split('\n');
var rowIndex = 0;
for (var i = 0; i < lines.length; i++) {
tilesCycled = 0;
for (var j = 0; j < lines[i].length; j++) {
tilesCycled = tilesCycled + 1;
var width = (myCanvas.width / 2 - image.width / 2) + tilesCycled * 30.8;
var height = (myCanvas.height / 2 - image.height / 2) + tilesCycled * 15.9;
ctx.drawImage(image,
width + rowIndex * 34,
height - rowIndex * 25,
);
}
rowIndex = rowIndex + 1;
}
}
image.src = 'https://raw.githubusercontent.com/Joopie1994/html5project-client/master/resources/assets/images/floor_tile.png';body {
background-color: black;
}<canvas id="game_canvas"></canvas>