'Change size of HTML5 canvas drawings but maintain canvas dimensions

Here is the scenario:

  • Suppose the dimensions of the canvas element is set to a max height and max width and obviously does not occupy the entire screen
  • We can make drawings made in the canvas larger on events:
   function onMouseMove(e)
   { 
      e.preventDefault();
      if (pinching) {
         resizeDrawings();
      }  
   }
   function resizeDrawings();
   {
     //stuff happens
     const context = currentCanvas.current.getContext('2d');
     //canvas operations

   }

Basically, i want the canvas to overflow and become scrollable if its own contents become too big to fit on it's own dimensions.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source