diff --git a/src/mol-canvas3d/util.ts b/src/mol-canvas3d/util.ts index d1e331e5bf2aabf0f91a4bc38b882c2d44d53e67..ae1d7270a221bd135b7d5e17b43c2f6c8c10ba17 100644 --- a/src/mol-canvas3d/util.ts +++ b/src/mol-canvas3d/util.ts @@ -6,8 +6,8 @@ /** Set canvas size taking `devicePixelRatio` into account */ export function setCanvasSize(canvas: HTMLCanvasElement, width: number, height: number) { - canvas.width = window.devicePixelRatio * width - canvas.height = window.devicePixelRatio * height + canvas.width = Math.round(window.devicePixelRatio * width) + canvas.height = Math.round(window.devicePixelRatio * height) Object.assign(canvas.style, { width: `${width}px`, height: `${height}px` }) } @@ -28,7 +28,7 @@ function _canvasToBlob(canvas: HTMLCanvasElement, callback: BlobCallback, type?: const len = bin.length const len32 = len >> 2 const a8 = new Uint8Array(len) - const a32 = new Uint32Array( a8.buffer, 0, len32 ) + const a32 = new Uint32Array(a8.buffer, 0, len32) let j = 0 for (let i = 0; i < len32; ++i) { diff --git a/src/mol-plugin/ui/image.tsx b/src/mol-plugin/ui/image.tsx index 726761ca81dce07d7aa21d5084e3fde50624d8be..5ed068ea834c4b501f9010faf0c89bd05c659536 100644 --- a/src/mol-plugin/ui/image.tsx +++ b/src/mol-plugin/ui/image.tsx @@ -64,7 +64,9 @@ export class ImageControls<P, S extends ImageControlsState> extends CollapsableC } setCanvasSize(this.canvas, w, h) const { pixelRatio } = this.plugin.canvas3d.webgl - const imageData = this.imagePass.getImageData(w * pixelRatio, h * pixelRatio) + const pw = Math.round(w * pixelRatio) + const ph = Math.round(h * pixelRatio) + const imageData = this.imagePass.getImageData(pw, ph) this.canvasContext.putImageData(imageData, 0, 0) }