Draw image from 2 - it doesn't work

by Leo

HTML

<script src="//api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.2/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.2/mapbox-gl.css">
<div id='map'></div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script><link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />

JavaScript

var map = new mapboxgl.Map({
    container: 'map',
    zoom: 3,
    center: [0,0],
    maxZoom: 5,
    style: {
        version: 8,
        sources: {
            slippymap: {
                type: "raster",
                scheme: "xyz",
                tiles: [
                    "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                ],
                tileSize: 256
            },
            "vs": {
                type: "vector",
                tiles: [
                    "http://localhost:9000/mapbox-tiles/epsg:3857/{z}/{x}/{y}.mvt"
                ],
                tileSize: 512,
                minzoom: 0,
                maxzoom: 18
            }

        },
        layers: [
            {
                id: "slippymap",
                type: "raster",
                source: "slippymap"
            }]
    }
});

map.addControl(new mapboxgl.NavigationControl({showCompass: false}), "top-left");

function loadImage(path, callback) {
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function () {
        callback.bind(img)(img);
    };
    img.src = path;
}

function getData(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width,
        canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(0, 0, img.width, img.height);
}

// see src/style/style_image.js:36
map.on('load', function () {
    var loadingState = {};

    map.on('styleimagemissing', function (e) {
        if (loadingState[e.id]) {
            return;
        }
        loadingState[e.id] = 1;

        loadImage(e.id, (img) => {
            setTimeout(() => {
                loadingState[e.id] = 2;
                var imageData = getData(img);

                map.addImage(e.id, {
                    width:...