title: fabric.js resize canvas to fit screen
body: <p>I'm currently developping an application on mobile device (android and iPhone) with ionic and cordova. I would like to edit a picture. I use fabric.js library to do that. Fabric.js converts an image and other items into canvas. Then I add some image on the canvas (stickers) and export it as an image(dataURL). So the size of the canvas is really important because it is a quality factor (export an image based on small canvas will result in poor quality). The canvas size is about 607*1080 pixel (depending on the device that took the photo). I would like to fit it in the screen without losing quality (like explained below I can't resize the canvas without losing quality).</p>
  
  <p>I tried 3 ideas but no one has worked.</p>
  
  <ol>
  <li><strong>Resize canvas</strong> : result in quality lost (image exported will have canvas size)</li>
  <li><strong>Adapt viewport</strong> : cordova doesn't allow to change the viewport on mobile device. There is a workaround but it will break my design (very small navbar, smaller menu, ...)</li>
  <li><strong>Use CSS3 zoom properties</strong> : It works like a charm on desktop but there is an event mapping problem on mobile device (I didn't try on ios but the problem happend on android Webview). Event mapping is not zoomed. The canvas is zoomed out but it is impossible to interact with canvas elements. If a canvas element (sticker) is located at x:100 y:100, when I set zoom property to 0.5, the element will be location at (50,50) and no more at (100,100). Is there any way to correct the event mapping depending on zoom property of the android webview?</li>
  </ol>
  
  <p>I don't know if there are other ways to do that but I'm stucked with this issue for 3 days and I've spend a lot of time on forums, fabricjs doc and google and I don't find any working solution or something else that can help me.</p>
  
  <p>EDIT: <strong>There are 2 working solution below. Check my answer to see how to do that with css.</strong></p>