Draw the animation the correct size

Lottie player needs to set a size on the canvas it draws on. To do this
the size needs to be provided by the client and set by the worker.

Bug: 986954
Change-Id: I3c30885ed0e1e038def113bba427cff6b0b452a0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1716025
Commit-Queue: Malay Keshav <malaykeshav@chromium.org>
Reviewed-by: Mitsuru Oshima <oshima@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680270}

third_party/lottie/README.md

+# Lottie Web Worker
+
+#### Using the lottie player on a worker thread and an offscreen canvas.
+
+## Sample usage
+### 1. Setting up a new animation
+#### HTML:
+```html
+<canvas id="a"></canvas>
+```
+
+#### Javascript:
+```js
+let offscreenCanvas = document.getElementById('a').transferControlToOffscreen();
+let animationData = JSON_LOTTIE_ANIMATION_DATA;
+
+let worker = new Worker('lottie_worker.min.js');
+worker.postMessage({
+  canvas: offscreenCanvas,
+  animationData: animationData,
+  drawSize: {
+    width: 200,
+    height: 100
+  }
+  params: {
+    loop: true,
+    autoplay: true
+  }
+})
+```
+
+### 2. Updating the size of the canvas
+```js
+worker.postMessage({
+  drawSize: {
+    width: 250,
+    height: 150
+  }
+})
+```
+
+## Message field description
+```python
+data: {
+  canvas: 'The offscreen canvas that will display the animation.',
+  animationData: 'The json lottie animation data.',
+  drawSize: {
+    width: 'The width of the rendered frame in pixels',
+    height: 'The height of the rendered frame in pixels',
+  },
+  params: {
+    loop: 'Set "true" for a looping animation',
+    autoplay: 'Set "true" for the animation to autoplay on load',
+  }
+},
+```

third_party/lottie/lottie_worker.js

@@ -12150,24 +12150,47 @@ GroupEffect.prototype.init = function(data,element){
  * a wrapper that manages animation control for each animation.
  */
 
-var animations = [];
+var currentAnimation = null;
 
 onmessage = function(evt) {
-    if (!evt || !evt.data || !evt.data.params || !evt.data.canvas) return;
-    var canvas = evt.data.canvas;
-    var params = evt.data.params;
-    var ctx = canvas.getContext("2d");
-    var animation = lottiejs.loadAnimation({
-        renderer: 'canvas',
-        loop: params.loop,
-        autoplay: params.autoplay,
-        animationData: evt.data.animationData,
-        rendererSettings: {
-            context: ctx,
-            scaleMode: 'noScale',
-            clearCanvas: true
-        }
-    });
-    animations.push(animation);
-    animation.play();
+    if (!evt || !evt.data) return;
+
+    var canvas = null;
+    if (currentAnimation) {
+        canvas = currentAnimation.renderer.canvasContext.canvas;
+    } else if (evt.data.canvas) {
+        canvas = evt.data.canvas;
+    } else {
+        return;
+    }
+
+    // Set the draw size of the canvas. This is the pixel size at which the
+    // lottie renderer will render the frames.
+    if (evt.data.drawSize) {
+        canvas.height = evt.data.drawSize.height;
+        canvas.width = evt.data.drawSize.width;
+
+        // Update lottie player to use the new canvas size.
+        if (currentAnimation)
+            currentAnimation.resize();
+    }
+
+    if (!currentAnimation) {
+        if (!evt.data.animationData || !evt.data.params)
+            return;
+        var params = evt.data.params;
+        var ctx = canvas.getContext("2d");
+        currentAnimation = lottiejs.loadAnimation({
+            renderer: 'canvas',
+            loop: params.loop,
+            autoplay: params.autoplay,
+            animationData: evt.data.animationData,
+            rendererSettings: {
+                context: ctx,
+                scaleMode: 'noScale',
+                clearCanvas: true
+            }
+        });
+        currentAnimation.play();
+    }
 };