imageOverlay not supported

[nyurik]

I tried adding imageoverlay, but it doesn't seem right. Any help? Thx!
CC: @jieter

    function drawTileLayer(l) {
        if (l instanceof L.TileLayer) layerQueue.defer(handleTileLayer, l);
        else if (l instanceof L.ImageOverlay) layerQueue.defer(handleImageOverlay, l);
        else if (l._heat) layerQueue.defer(handlePathRoot, l._canvas);
    }
...
    function handleImageOverlay(imgOverlay, callback) {
        var imgBounds = imgOverlay.getBounds(),
            bounds = new L.Bounds(
                map.latLngToLayerPoint(imgBounds.getNorthWest()),
                map.latLngToLayerPoint(imgBounds.getSouthEast())),
            size = bounds.getSize();
        var ctx = canvas.getContext('2d');
        ctx.drawImage(imgOverlay._url, bounds.min.x, bounds.min.y, size.x, size.y);
        callback(null, { canvas: canvas });
    }

[bonbon2106]

you should create an image object for drawImage function:
var imageObj = new Image();
imageObj.src = imgOverlay._url;
ctx.drawImage(imageObj, bounds.min.x, bounds.min.y, size.x, size.y);

this is worked for me.:)

[MeniscusJason]

I am using leaflet 1.4.0 but I just can't get this to work

The code is being reached and appears to be working, but the layer never appears on my final output.

Any suggestions or help would be most appreciated

[MeniscusJason]

In case anyone else has an issue with this, it was due to the image actually being re-downloaded rather than used from leaflet and so the code needs to be put in an onLoad statement

       imageObj.onload = function () {
            ctx.drawImage(imageObj, bounds.min.x, bounds.min.y, size.x, size.y);
            callback(null, { canvas: canvas });
        };

Here are both functions in full

To decide which type of layer this is

function drawTileLayer(l) {
        if (l instanceof L.TileLayer) {
            layerQueue.defer(handleTileLayer, l);
        }
        else if (l instanceof L.ImageOverlay) {
            layerQueue.defer(handleImageOverlay, l);
        }
        else if (l._heat) {
            layerQueue.defer(handlePathRoot, l._canvas);
        }
    }

To get the imageLayer

    function handleImageOverlay(imgOverlay, callback) {
        var canvas = document.createElement('canvas');
        canvas.width = dimensions.x;
        canvas.height = dimensions.y;

        var ctx = canvas.getContext("2d")
        var imgBounds = imgOverlay.getBounds(),
            bounds = new L.Bounds(
                map.latLngToLayerPoint(imgBounds.getNorthWest()),
                map.latLngToLayerPoint(imgBounds.getSouthEast())),
            size = bounds.getSize();

        var imageObj = new Image();
        imageObj.src = imgOverlay._url;
        ctx.globalAlpha = (imgOverlay.options && imgOverlay.options.opacity) ? imgOverlay.options.opacity : 1;

        imageObj.onload = function () {
            ctx.drawImage(imageObj, bounds.min.x, bounds.min.y, size.x, size.y);
            callback(null, { canvas: canvas });
        };
    }