import { Settings } from './settings' ; const dpr = window . devicePixelRatio || 1 ; /**
 * Wrapper around the canvas that manages scaling and DPI adjustment.
 */ export class Canvas { public readonly elem = document . createElement ( 'canvas' ) ; public readonly ctx = this . elem . getContext ( '2d' ) as CanvasRenderingContext2D ; protected scale = 1 ; constructor ( public width , public height , protected readonly settings ) { this . updateSize ( width , height , true ) ; } /**
     * Disposes unmanaged resources.
     */ public dispose ( ) { } /**
     * Updates the canvas dimensions.
     */ public updateSize ( width , height , force = false ) { if ( ! force && width === this . width && height === this . height ) { return ; } this . width = width ; this . height = height ; this . applySizing ( ) ; } /**
     * Updates the canvas zoom level.
     */ public applySizing ( ) { const { ctx } = this ; const effectiveZoom = ( this . scale = dpr ) ; ctx . canvas . width = this . width * effectiveZoom ; ctx . canvas . height = this . height * effectiveZoom ; ctx . canvas . style . width = `${ this . width }px` ; ctx . canvas . style . height = `${ this . height }px` ; ctx . resetTransform ( ) ; ctx . scale ( effectiveZoom , effectiveZoom ) ; this . redraw ( ) ; } /**
     * Called when a size or zoom level change happens.
     */ protected redraw ( ) { } }