Class for controlling zoom and mouse position coordinates.

Diffgram's 2D Annotation Editor relies heavily on calculations based on the mouse position for drawing boxes and zooming in/out.

This class provides the basic functionality to calculate the mouse position and zoom in and out of the screen.

Assumption For Drawing With 2D Canvas ctx

  1. We do NOT accumulate transformations on variables, each draw cycle does not reset the canvas unless an edit command requires it. This means that every transformation action, for example a scale, is performed in a step-like process and not accumulated in some variables.

  2. The process for most transform operations is the following:

  • Move the object of interest to origin with a translate
  • Apply the operation at origin
  • Return the object to original position
  • Apply the current transformation matrix.
  1. To get the current transformation matrix of the canvas we use the getTransform() and setTransform() function provided by the Canvas 2D API. More info here: