Game design: Type error when trying to use an image preloaded with assets.js

Question

I hope someone can tell me what I'm doing wrong here.

I'm trying to draw an image on canvas.

The images are part of a texture atlas (created with texturePacker) so there is a sprite sheet and an accompanying JSON file:

{"frames": {

"cat.png":
{
    "frame": {"x":2,"y":2,"w":128,"h":128},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
    "sourceSize": {"w":128,"h":128}
},
"hedgehog.png":
{
    "frame": {"x":132,"y":2,"w":128,"h":128},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
    "sourceSize": {"w":128,"h":128}
},
"tiger.png":
{
    "frame": {"x":262,"y":2,"w":128,"h":128},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
    "sourceSize": {"w":128,"h":128}
}},
"meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "animals.png",
    "format": "RGBA8888",
    "size": {"w":392,"h":132},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:9a29ce0a7220e3ca27b8044b48608e8d:06a75246a1a4b65f2beacae47a5e81d7:b00d48b51f56eb7c81e25100fcce2828$"
}
}

The texture atlas is preloaded by a file named assets.js, a utility created to preload game assets. I thought the file was a little too large to post here.

When I try to paint a preloaded image on canvas with either ctx.drawImage() or ctx.createPattern() I get an error:

TypeError: CanvasRenderingContext2D.createPattern: Argument 1 could not be converted to any of:

 HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.

I am supposed to be able to access the individual images on the sprite sheet in the following way:

`let anyImage = assets["anImage.png"]

So, my code is thus:

import { assets } from "../lib/assets.js";
import { makeCanvas } from "../lib/makeCanvas.js";

// load the files
assets
  .load(["../images/animals.json", "../images/animals.png"])
  .then(() => setUp());

function setUp() {
  let canvas = makeCanvas();
  let ctx = canvas.ctx;

  //Load an image to test that everything works
  let catImage = new Image();
  console.log(catImage);
  catImage.addEventListener("load", loadHandler, false);
  catImage.src = "../images/cat.png";

  // try to use preloaded image fails with Type error
  //ctx.drawImage(assets["tiger.png"], 0, 0);

  // try another way of using preloaded image
  // also fails with the same Type error
  let tiger = assets["tiger.png"];
  console.log(tiger);
  let pattern = ctx.createPattern(tiger, "no-repeat");
  ctx.fillStyle = pattern;
  ctx.rect(0, 0, 64, 64);
  ctx.fill();

  //The loadHandler to draw the catIamage
  function loadHandler() {
    ctx.drawImage(catImage, 128, 128);
  }

}

Note: I haven't included the assets.js or makeCanvas.js code because I believe they are working correctly. But the source code can be found here: assets.js

From console.log(tiger) I get the following:

Object { frame: {…}, rotated: false, trimmed: false, spriteSourceSize: {…}, sourceSize: {…}, source: img }
​
frame: Object { x: 262, y: 2, w: 128, … }
​
rotated: false
​
source: <img src="../images/animals.png">
​
sourceSize: Object { w: 128, h: 128 }
​
spriteSourceSize: Object { x: 0, y: 0, w: 128, … }
​
trimmed: false
​
<prototype>: Object { … }

Can anyone see what I am doing wrong here? It appears that everything is loaded as it should be, but I just don't seem to be able to use the assets.

Thanks in advance, it's really appreciated.