Why Do I Have To Redraw The Image After Changing The Canvas Size?

I'm trying to create a small meme generator that allows the user to use any URL he/she wants and change the size of the image. Everything's working the way it should, but I notice

Solution 1:

The relevant part of the spec:

When the user agent is to set bitmap dimensions to width and height, it must run the following steps:

1. Reset the rendering context to its default state.

2. Clear the scratch bitmap's hit region list and its list of pending interface actions.

3. Resize the scratch bitmap to the new width and height and clear it to fully transparent black.

4. If the rendering context has an output bitmap, and the scratch bitmap is a different bitmap than the output bitmap, then resize the output bitmap to the new width and height and clear it to fully transparent black.

You can try getImageData() before resizing the canvas, and then putImageData() after, but I'm not sure if the same-origin policy will allow it.

If you don't need to change the intrinsic size of the canvas, you can change canvas.style.width and canvas.style.height, this will not erase the canvas.