Mapping pointer coordinates to a canvas drawing buffer when displayed size differs

When a canvas is shown at a different size than its drawing buffer, pointer events report viewport positions that must be converted before markers are drawn. The conversion subtracts the canvas's on-screen position and scales the result by the ratio of buffer size to displayed size. The approach assumes an unrotated, axis-aligned canvas without CSS border or padding, so decorative borders should go on a wrapper element instead. Additional steps are needed if the drawing context has a transform or if the image is letterboxed within the buffer. The article advises re-reading the bounding rectangle after layout changes and checking the mapping near multiple corners to catch scaling errors.