let image,

      imageData,

      ctx = new OffscreenCanvas(0, 0).getContext('2d'),

      main = document.querySelector('canvas'),

      c = main.getContext('2d'),

      width, height,

      imageAsBlob,

      imageAsBitmap

  async function globalMeasureThatScriptPrepareFunction() {

      image = await loadImage();

      ({width, height} = image)

      ctx.canvas.width = main.width = width

      ctx.canvas.height = main.height = height

      ctx.drawImage(image, 0, 0, width, height)

      imageData = ctx.getImageData(0, 0, width, height)

      imageAsBlob = await loadImage(URL.createObjectURL(await ctx.canvas.convertToBlob()))

      imageAsBitmap = await createImageBitmap(ctx.canvas, 0, 0, width, height)

  }

​

  function loadImage(url = `https://www.measurethat.net/images/Picture1.png`) {

      return new Promise(resolve => {

          const img = new Image

          img.src = url

          img.onload = () => resolve(img)

      })

  }

​

  function clear() {

      c.clearRect(0, 0, width, height)

  }

  const repeatCount = 1

​

  function test(num) {

      switch (num) {

          case 1:

              for (let n = repeatCount; n--;) {

                  c.drawImage(image, 0, 0, width, height)

                  clear()

              }

              break

          case 2:

              for (let n = repeatCount; n--;) {

                  c.putImageData(imageData, 0, 0)

                  clear()

              }

              break

          case 3:

              for (let n = repeatCount; n--;) {

                  c.drawImage(imageAsBlob, 0, 0)

                  clear()

              }

              break

          case 4:

              for (let n = repeatCount; n--;) {

                  c.drawImage(imageAsBitmap, 0, 0)

                  clear()

              }

              break

      }

  }