Can I pre-scale and cache Images?

Question

I have a game which is drawing 324 tiles to an HTML5 canvas at 60 frames per second. It was working great when the tilesize was set to a fixed number of pixels and matched the pixels of the source image file. I updated the game to resize to the user's screen upon load. Everything still works fine, but the game has a bit of lag now. My assumption is that this is caused by the resizing of the images on every draw. I am using the drawImage() method as follows:

ctx.drawImage(image, xCoord, yCoord, tileSize, tileSize);

I have tried modifying the width and height of each of the tile images after the new tileSize is obtained:

tiles.forEach((tile) => {
   tile.image.height = tileSize;
   tile.image.width = tileSize;
}

The values are retained in the object, but if I call drawObject without specifying width and height, they are drawn back at their naturalHeight and naturalWidth.

How can I resize the images and store the resized versions for use throughout the program?