На основе класса L.TileLayer разработать аналогичный CanvasTileLayer, который отображает полученные от сервера тайлы в 1 большой канвас

Необходимо создавать img тайлы и без добавления в dom рисовать их на canvas

У меня есть код, который переделывает каждый тайл в canvas, но это не то, что мне нужно.

import L from 'leaflet';

class CanvasTileLayer extends L.TileLayer {
    constructor(urlTemplate: string, options?: L.TileLayerOptions) {
        super(urlTemplate, options);
    }

    public createTile(coords: L.Coords, done: L.DoneCallback): HTMLCanvasElement {
        const canvas = document.createElement('canvas');
        const size = this.getTileSize();
        canvas.width = size.x;
        canvas.height = size.y;

        const ctx = canvas.getContext('2d');
        if (!ctx) {
            throw new Error('Could not create canvas context');
        }

        const img = new Image();
        img.onload = () => {
            ctx.drawImage(img, 0, 0);
            done(undefined, canvas);
        };
        img.onerror = (e) => {
            done(new Error('error'), canvas);
        };
        img.src = this.getTileUrl(coords);
        return canvas;
    }
}

export default CanvasTileLayer;