const image = document.createElement('img');

const loading = new Promise(resolve => {

    image.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

    image.addEventListener('load', () => resolve(image));

});

(async function setup () {

    await loading;

    const width = image.naturalWidth;

    const height = image.naturalHeight;

​

    canvas = document.createElement('canvas');

    canvas.width = width;

    canvas.height = height;

    canvas.getContext('2d').drawImage(image, 0, 0);

​

    offscreen = new OffscreenCanvas(width, height);

    offscreen.getContext('2d').drawImage(image, 0, 0);

​

    bitmap = offscreen.transferToImageBitmap();

​

    const c1 = document.createElement('canvas');

    c1.width = width;

    c1.height = height;

    ctx1 = c1.getContext('2d');

​

    const c2 = new OffscreenCanvas(width, height);

    ctx2 = c2.getContext('2d');

    const c3 = document.createElement('canvas');

    c3.width = width;

    c3.height = height;

    ctx3 = c3.getContext('bitmaprenderer');

    const c4 = new OffscreenCanvas(width, height);

    ctx4 = c4.getContext('bitmaprenderer');

})();

async function getTestObjects() {

    await loading;

    return {

      image,

      canvas,

      offscreen,

      bitmap,

      ctx1,

      ctx2,

      ctx3,

      ctx4,

    }

}