window.onload = function () {

    // GET THE IMAGE.
    var img = new Image();
    img.src = 'City.png';
    var background = new Image();
    var grass = new Image();
    grass.src = 'grass.png'
    var sea = new Image();
    sea.src = 'sea.png'
    var hills = new Image();
    hills.src = 'hills.png'
    tiles = [grass,hills,sea];
    background.src = 'background.png';
    // WAIT TILL IMAGE IS LOADED.
    img.onload = function () {
        fill_canvas(img);       // FILL THE CANVAS WITH THE IMAGE.
    }

    function fill_canvas(img) {
        // CREATE CANVAS CONTEXT.
        var canvas = document.getElementById('canvas');
        canvas.width = 384;
        canvas.height = 384;
        var ctx = canvas.getContext('2d');




        ctx.drawImage(background, 0, 0);       // DRAW THE IMAGE TO THE CANVAS.
        ctx.drawImage(img, 0, 0);
        let x, y = 0
        for(x = 0; x < getBlockDimensions()[0]; x++){
          for(y = 0; y < getBlockDimensions()[1]; y++){

          ctx.drawImage(tiles[randomNumber(0,3)], x*24,y*24)
          }
        }
    }
}

function getBlockDimensions(){

return [canvas.width/24, canvas.height/24]
}

function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}