Redraw Canvas at Higher Resolution

[Paquette1111]

I'm building a thumbnail creator with images and labels and I want the canvas to display at screen width but I want to save to png at a desired resolution of the same aspect ratio.

Something like this works but upscales the low res canvas to desiresd res

const saveAsPNG = () => {

      // example res = [1920, 1080]
      // Issue: canvas is currently 860x484px. When attributes are applied it up scales the canvas data

      const dataUrl = editor.export.toImage({
          width: res[0],
          height: res[1]
      });

      const link = document.createElement('a');
      link.download = 'test.png';
      link.href = dataUrl;
      link.click();
 }

Does anyone know of a solution for this?

[raminious]

Hey @Paquette1111 I can help you figure it out if you provide a very basic codesandbox

[Paquette1111]

Hey! I think I actually found a solution! As far as I can tell this works for me! Happy to hear your thoughts on this solution though!

const scaleBoard = (res: [number, number]) => {

    // Scale stage
    const currentRes = [editor.board.stage.width(), editor.board.stage.height()];

    const multiplier = res[0] /  currentRes[0];

    editor.board.stage.scale({ x: multiplier, y: multiplier });
    editor.board.stage.width(res[0]);
    editor.board.stage.height(res[1]);
    
    saveAsPNG();
    
    // revert changes
    editor.board.stage.width(currentRes[0]);
    editor.board.stage.height(currentRes[1]);
    editor.board.stage.scale({ x: 1 , y: 1 });

}

const saveAsPNG = () => {
    const dataUrl = editor.export.toImage();
    
    const link = document.createElement('a');
    link.download = 'test.png';
    link.href = dataUrl;
    link.click();
}

[raminious]

@Paquette1111 Your solution looks good to me but I want to bring something into your mind.
You could also do this with OffscreenCanvas (https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
So here, you could export current stage to data url and create thumbnail with OffscreenCanvas

const image = editor.export.toImage()

const offscreen = new OffscreenCanvas(width, height)

const context = offscreen.getContext(
  '2d'
) as OffscreenCanvasRenderingContext2D

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

offscreen
  .convertToBlob({
    quality: 0.9,
    type: 'image/jpeg'
  })
  .then(blob => {
    const url = URL.createObjectURL(blob)
    // ... rest ...
  })