Getting 2 images right next to each other?

Question

I'm trying to put these 2 images together, their supposed to join together to make a map, here is an image of how their supposed to go together.

 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>

Answer 1

Just change the for loop structure and some numbers - the code will work as required.

 var testHeightMap = 'xxx\\n' + 'xxx\\n' + 'xxx'; var myCanvas = document.getElementById('game_canvas'); var ctx = myCanvas.getContext('2d'); ctx.canvas.width = 512 ctx.canvas.height = 512 var image = new Image; var tilesCycled = 0; image.onload = function() { var lines = testHeightMap.split('\\n'); for (var i = lines.length; i>0; i--) { for (var j = 0; j<lines[i-1].length; j++) { var width = (myCanvas.width / 2 - image.width / 2) var height = (myCanvas.height / 2 - image.height / 2) ctx.drawImage(image, width + (j+i) * 32, height + (ji) * 16, ); } } } image.src = 'https://raw.githubusercontent.com/Joopie1994/html5project-client/master/resources/assets/images/floor_tile.png';

 body { background-color: black; }

 <canvas id="game_canvas" style="width:512px;height:512px;"></canvas>