Display zoomed-out canvas on screen but download full-size canvas with `toDataURL`

In my web application, I have a canvas with a download button that will download the current canvas as a PNG using .toDataURL.

Let's say my full-size canvas is 100px by 100px

I would like to display the canvas on the web page at a scaled-down scale (let's say 50%) but I would like the download to download the full-scale image. I am stuck on how to achieve this. Right now I am scaling down the whole canvas (both the width and height of the canvas element as well as using fabricCanvas's setZoom function to scale the image for display, but this means that toDataURL generates a zoomed-out image for download.

Ideally I would like the canvas to internally be rendered at full size (so toDataURL will generate a full-size png) but displayed on screen at a scaled-down size.

TL;DR: Is there a way to display a 50x50 px canvas on screen, yet download a 100x100 version using toDataURL?

Fiddle: https://jsfiddle.net/pahxjd1s/35

from Display zoomed-out canvas on screen but download full-size canvas with `toDataURL`