[Vuejs]-HTML 5 wait for drawImage to finish in a Vue SPA

by

0👍

✅

I managed to get it working by properly wrapping the drawImage step in a separate method and inside a promise the proper way. See the code below for an example of two methods that were the culprits but are now fixed.

async composeCanvas( gif , timeStep , visibleLayers , delayInput) {
    const mapCnv = this.getMapCanvas();
    await this.updateInfoCanvas( timeStep )
    const numberVisibleLayers = visibleLayers.length;
    const composedCnv = await this.stitchCanvases( mapCnv , numberVisibleLayers );
    gif.addFrame(composedCnv, {copy:false, delay: delayInput});
},
async stitchCanvases( mapCanvas , numberVisibleLayers ) {
    return new Promise(( resolve ) => {
        var composedCnv = document.createElement('canvas');
        var ctx = composedCnv.getContext('2d');
        var ctx_w = mapCanvas.width;
        var ctx_h = mapCanvas.height + ((numberVisibleLayers - 1) * 30) + 40;
        
        composedCnv.width = ctx_w;
        composedCnv.height = ctx_h;

        [
            {
                cnv: mapCanvas,
                y: 0
            },
            {
                cnv: this.infoCanvas,
                y: mapCanvas.height
            }
        ].forEach( ( n ) => {
            ctx.beginPath();
            ctx.drawImage(n.cnv, 0, n.y, ctx_w, n.cnv.height);
        });

        resolve(composedCnv)
    })
}

Leave a comment