diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index f6f68d1f977a..3530a4aaf73e 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -692,6 +692,10 @@ export class CanvasViewImpl implements CanvasView, Listener { ctx.scale(image.renderWidth / image.imageData.width, image.renderHeight / image.imageData.height); ctx.putImageData(image.imageData, 0, 0); + // Transformation matrix must not affect the putImageData() method. + // By this reason need to redraw the image to apply scale. + // https://www.w3.org/TR/2dcontext/#dom-context-2d-putimagedata + ctx.drawImage(this.background, 0, 0); } else { ctx.drawImage(image.imageData, 0, 0); } diff --git a/cvat/apps/engine/static/engine/js/player.js b/cvat/apps/engine/static/engine/js/player.js index 3221b73c5107..682f944cd8a4 100644 --- a/cvat/apps/engine/static/engine/js/player.js +++ b/cvat/apps/engine/static/engine/js/player.js @@ -273,8 +273,6 @@ class PlayerModel extends Listener { if (absolute) { this._frame.requested.clear(); } - this._frame.requested.add(requestedFrame); - if (!isLoadFrame) { this._image = null; this._continueAfterLoad = this.playing; @@ -287,6 +285,8 @@ class PlayerModel extends Listener { return false; } + this._frame.requested.add(requestedFrame); + try { const frame = await this._frameProvider.require(requestedFrame, this._playing, this._step); @@ -965,6 +965,10 @@ class PlayerView { ctx.scale(image.renderWidth / image.imageData.width, image.renderHeight / image.imageData.height); ctx.putImageData(image.imageData, 0, 0); + // Transformation matrix must not affect the putImageData() method. + // By this reason need to redraw the image to apply scale. + // https://www.w3.org/TR/2dcontext/#dom-context-2d-putimagedata + ctx.drawImage(this._playerCanvasBackground[0], 0, 0); } else { ctx.drawImage(image.imageData, 0, 0); }