How to handle different Image / Viewport sizes in JS/HTML Image Editor

Im currently trying to create an easy to use image editor. It should be able to load multiple images from client/database to a canvas, modify them in dimensions, position, rotation, add Text and simple shapes and save them as a new Image. My final result has always to be an 1920x1080 jpg. The visible viewport varies from user to user and the images imported to the canvas can be larger or smaller than this.

I was thinking to create a new Canvas for each image with its dimenions, 1 canvas for the final rendering and 1 resized version of that which would be visible to the client. That way i had to redraw alot of canvases everytime i change something.

What would be the best way to handle the different sizes of viewport, images and result ?