New To Phaser - Issues With Initialization

[onmyown]

Hello, I am new to phaser.js (starting today! :)) after being inspired by a Google Doodle to learn to make games that you can play over the internet.

I have some JavaScript experience, and am posting my code below:

My tilemap:

 

{ "height":6,
 "layers":[
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2052, 0, 0, 0, 77, 77, 77, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 77, 77, 77, 77, 77, 77, 0, 0, 77, 77, 0, 0, 77, 77, 77, 77, 0, 0, 0, 77, 77, 77, 77, 77, 77, 77, 0, 0, 0, 0, 0, 77, 77, 77, 77, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":6,
         "name":"TileLayer",
         "opacity":0.899999976158142,
         "type":"tilelayer",
         "visible":true,
         "width":48,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "properties":
    {

    },
 "renderorder":"right-down",
 "tileheight":32,
 "tilesets":[
        {
         "columns":23,
         "firstgid":1,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":1,
         "tilecount":644,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":23,
         "firstgid":645,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":2,
         "tilecount":621,
         "tileheight":32,
         "tilewidth":32
        }, 
        {
         "columns":23,
         "firstgid":1266,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":1,
         "tilecount":644,
         "tileheight":32,
         "tilewidth":32,
         "transparentcolor":"#ff00ff"
        }, 
        {
         "columns":11,
         "firstgid":1910,
         "image":"..\/images\/tiles_spritesheet.png",
         "imageheight":934,
         "imagewidth":790,
         "margin":0,
         "name":"tiles_spritesheet",
         "properties":
            {

            },
         "spacing":2,
         "tilecount":143,
         "tileheight":70,
         "tilewidth":70
        }],
 "tilewidth":32,
 "version":1,
 "width":48
}

 

My JavaScript:

var game = new Phaser.Game(768, 384, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'img/ZlOsM7Z.png');
    game.load.spritesheet('baker', 'img/baker.png', 115, 188);
    game.load.tilemap('level1', 'javascript/level1.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('gametiles', 'img/tiles_spritesheet.png');
}

function create() {
//game.add.sprite(0, 0, 'sky');
// The player and its settings

this.map = this.game.add.tilemap('level1');

game.stage.backgroundImage = 'sky';

    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
    this.map.addTilesetImage('tiles_spritesheet', 'gametiles');
    
    //this.backgroundlayer = this.map.createLayer('Image Layer 1');
    this.TileLayer = this.map.createLayer('TileLayer');

    //collision on blockedLayer
    this.map.setCollisionBetween(1, 5000, true, 'TileLayer', false);

    //  We need to enable physics on the player
    player = game.add.sprite(115, game.world.height - 150, 'baker');
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1], 10, true);
    player.animations.add('right', [3,4], 10, true);
    this.TileLayer.resizeWorld();
}

function update() {
cursors = game.input.keyboard.createCursorKeys();
//  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 2;
    }

    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown)
    {
        player.body.velocity.y = -350;
    }
}

My errors:

 

! phaser.js:93527 Phaser.Tileset - image tile area is not an even multiple of tile size
X phaser.js:93446 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

 

Please assist me in squashing my two errors! I do not understand why they appear!