Viewport State

The read-only viewport transform state can be accessed via the viewport property of the canvas.

    
const element = document.getElementById("canvas");

const canvas = new CanvasBuilder(element)
  .build();

console.log(canvas.viewport);

  

The viewport object provides the following methods:

1. Retrieve the current dimensions of the viewport:

       
   const { width, height } = canvas.viewport.getDimensions();
   
     

2. Convert viewport coordinates to content coordinates:

       
   const { x, y } = canvas.viewport.createContentCoords({ x: 10, y: 20 });
   
     

3. Convert content coordinates to viewport coordinates:

       
   const { x, y } = canvas.viewport.createViewportCoords({ x: 10, y: 20 });
   
     

4. Retrieve the state of the viewport matrix.

       
   const viewportMatrix = canvas.viewport.getViewportMatrix();
   
     

5. Retrieve the state of the content matrix.

       
   const contentMatrix = canvas.viewport.getContentMatrix();