Merge pull request #2792 from knenkne/fix/worker-canvas-size
[Canvas worker] Fix initial canvas size to prevent blur & fix resize event
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 6de0e83..8ed2292 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -350,8 +350,8 @@
}
};
-AnimationItem.prototype.resize = function () {
- this.renderer.updateContainerSize();
+AnimationItem.prototype.resize = function (width, height) {
+ this.renderer.updateContainerSize(width, height);
};
AnimationItem.prototype.setSubframe = function (flag) {
diff --git a/player/js/renderers/CanvasRendererBase.js b/player/js/renderers/CanvasRendererBase.js
index 6a0b097..eeed531 100644
--- a/player/js/renderers/CanvasRendererBase.js
+++ b/player/js/renderers/CanvasRendererBase.js
@@ -195,19 +195,21 @@
this.updateContainerSize();
};
-CanvasRendererBase.prototype.updateContainerSize = function () {
+CanvasRendererBase.prototype.updateContainerSize = function (width, height) {
this.reset();
var elementWidth;
var elementHeight;
if (this.animationItem.wrapper && this.animationItem.container) {
- elementWidth = this.animationItem.wrapper.offsetWidth;
- elementHeight = this.animationItem.wrapper.offsetHeight;
- this.animationItem.container.setAttribute('width', elementWidth * this.renderConfig.dpr);
- this.animationItem.container.setAttribute('height', elementHeight * this.renderConfig.dpr);
+ elementWidth = this.animationItem.wrapper.offsetWidth * this.renderConfig.dpr;
+ elementHeight = this.animationItem.wrapper.offsetHeight * this.renderConfig.dpr;
} else {
- elementWidth = this.canvasContext.canvas.width * this.renderConfig.dpr;
- elementHeight = this.canvasContext.canvas.height * this.renderConfig.dpr;
+ elementWidth = width || this.canvasContext.canvas.width * this.renderConfig.dpr;
+ elementHeight = height || this.canvasContext.canvas.height * this.renderConfig.dpr;
}
+
+ this.canvasContext.canvas.width = elementWidth;
+ this.canvasContext.canvas.height = elementHeight;
+
var elementRel;
var animationRel;
if (this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1) {
diff --git a/player/js/worker_wrapper.js b/player/js/worker_wrapper.js
index 63c41a9..5cd5a19 100644
--- a/player/js/worker_wrapper.js
+++ b/player/js/worker_wrapper.js
@@ -332,7 +332,7 @@
}
} else if (type === 'resize') {
if (animations[payload.id]) {
- animations[payload.id].animation.resize();
+ animations[payload.id].animation.resize(payload.width, payload.height);
}
} else if (type === 'playSegments') {
if (animations[payload.id]) {
@@ -692,11 +692,15 @@
});
}
},
- resize: function () {
+ resize: function (width, height) {
+ var devicePixelRatio = window.devicePixelRatio || 1;
workerInstance.postMessage({
type: 'resize',
payload: {
id: animationId,
+ // Till Worker thread knows nothing about container, we've to pass it here
+ width: width || (animation.container ? animation.container.offsetWidth * devicePixelRatio : 0),
+ height: height || (animation.container ? animation.container.offsetHeight * devicePixelRatio : 0),
},
});
},
@@ -730,10 +734,11 @@
// If no custom canvas was passed
if (!canvas) {
+ var devicePixelRatio = window.devicePixelRatio || 1;
canvas = document.createElement('canvas');
animation.container.appendChild(canvas);
- canvas.width = animationParams.animationData.w;
- canvas.height = animationParams.animationData.h;
+ canvas.width = (animation.container ? animation.container.offsetWidth : animationParams.animationData.w) * devicePixelRatio;
+ canvas.height = (animation.container ? animation.container.offsetHeight : animationParams.animationData.h) * devicePixelRatio;
canvas.style.width = '100%';
canvas.style.height = '100%';
}
