diff --git a/src/client/canvas.ts b/src/client/canvas.ts index 127e10b..ebf467c 100644 --- a/src/client/canvas.ts +++ b/src/client/canvas.ts @@ -40,13 +40,10 @@ export class ViewCanvas { constructor() {} public moveCanvas(): void { - const zoomLength = this._size / this._zoom; - // Snap the canvas coordinates to pixels, using the zoom level as the size of one pixel - const snapx = Math.floor(this._posx / zoomLength) * zoomLength; - const snapy = Math.floor(this._posy / zoomLength) * zoomLength; - this._canvas.style.top = `${snapy}px`; - this._canvas.style.left = `${snapx}px`; - this._canvas.style.transform = `scale(${zoomLength})`; + const pixelSize = this._size / this._zoom; + this._canvas.style.top = `${this._posy}px`; + this._canvas.style.left = `${this._posx}px`; + this._canvas.style.transform = `scale(${pixelSize})`; } public center(): void { @@ -71,21 +68,22 @@ export class ViewCanvas { // Position of the on-screen cursor, snapped // Relative to top left of screen - this._cursorx = - Math.ceil( - clamp(this._viewWidth / 2, screenX, screenX + realSize) / pixelSize, - ) * pixelSize; - this._cursory = - Math.ceil( - clamp(this._viewHeight / 2, screenY, screenY + realSize) / pixelSize, - ) * pixelSize; + this._cursorx = Math.floor( + clamp(this._viewWidth / 2, screenX, screenX + realSize), + ); + this._cursory = Math.floor( + clamp(this._viewHeight / 2, screenY, screenY + realSize), + ); // Position of the cursor on the canvas this._relcursorx = Math.floor((this._cursorx - screenX) / pixelSize); this._relcursory = Math.floor((this._cursory - screenY) / pixelSize); - this._cursor.style.top = `${this._cursory - pixelSize / 2}px`; - this._cursor.style.left = `${this._cursorx - pixelSize / 2}px`; + const snappedX = this._relcursorx * pixelSize + screenX; + const snappedY = this._relcursory * pixelSize + screenY; + + this._cursor.style.top = `${snappedY + pixelSize / 2}px`; + this._cursor.style.left = `${snappedX + pixelSize / 2}px`; this._cursor.style.transform = `scale(${pixelSize})`; }