type { number } export function getPixelRatio ( ) { return window . devicePixelRatio ; } param canvas param width param height returns { HTMLCanvasElement } export function canvasResize ( canvas , width , height ) { const ratio = getPixelRatio ( ) ; canvas . width = width * ratio ; canvas . height = height * ratio ; canvas . style . width = width + 'px' ; canvas . style . height = height + 'px' ; canvas . getContext ( '2d' ) . setTransform ( ratio , 0 , 0 , ratio , 0 , 0 ) ; return canvas ; } param width param height returns { HTMLCanvasElement } export function createCanvas ( width , height ) { const canvas = document . createElement ( 'canvas' ) ; return canvasResize ( canvas , width , height ) ; } export interface Coordinate { x : number ; y : number ; } export interface Area { x : number ; y : number ; width : number ; height : number ; } param num param min param max returns { number } export function numberWithinRange ( num , min , max ) { num = num > max ? max : num ; num = num < min ? min : num ; return num ; } param coordinate param area returns { Coordinate } export function coordinateWithinArea ( coordinate , area ) { return { x : numberWithinRange ( coordinate . x , area . x , area . x + area . width ) , y : numberWithinRange ( coordinate . y , area . y , area . y + area . height ) , } ; } param el returns { { x : number , y : number , width : number , height : number } } export function getElementArea ( el ) { return { x : el . offsetLeft , y : el . offsetTop , width : el . offsetWidth , height : el . offsetHeight , } ; } export function getCoordinateFromPointerEvent ( e ) { return { x : e . pageX , y : e . pageY , } ; } export function getPositionAsPercentageInArea ( coordinate , area ) { return { x : ( coordinate . x - area . x ) / area . width * 100 , y : 100 - ( ( coordinate . y - area . y ) / area . height * 100 ) , } ; } export function getCoordinateFromEventAsPercentageWithinElement ( e , el ) { const area = getElementArea ( el ) ; return getPositionAsPercentageInArea ( coordinateWithinArea ( getCoordinateFromPointerEvent ( e ) , area ) , area ) ; } export function getPercentageBetweenRange ( x , min , max ) { return ( 100 * x ) / ( max - min ) ; } export function getValueFromPercentageRange ( x , min , max ) { return ( ( max - min ) / 100 ) * x ; } export function hitTest ( x , y , targetX , targetY , targetWidth , targetHeight ) { return ( x >= targetX && x <= targetX + targetWidth && y >= targetY && y <= targetY + targetHeight ) ; }