export interface EventWithPoint {
    readonly clientX: number;
    readonly clientY: number;
}

export const getRealPoint = (canvas: HTMLCanvasElement, e: EventWithPoint): DOMPoint => {
    const matrix = new DOMMatrix();
    const scale = Math.min(canvas.clientWidth / canvas.width, canvas.clientHeight / canvas.height);
    
    const realWidth = canvas.width * scale;
    const realHeight = canvas.height * scale;

    const offsetLeft = (canvas.clientWidth - realWidth) / 2;
    const offsetTop = (canvas.clientHeight - realHeight) / 2;

    matrix.translateSelf(offsetLeft, offsetTop);
    matrix.scaleSelf(scale);
    matrix.invertSelf();

    const point = new DOMPoint(e.clientX, e.clientY);

    return point.matrixTransform(matrix);
}