@px-petals/roku.motion-web 0.0.0-stage → 1.1.0

package/lottie/lottie.layers.js

@@ -0,0 +1,416 @@
+/**
+ * Lottie layers onto a 2D canvas: parenting, precomps with time remapping,
+ * solids, images, shapes, masks, track mattes and blend modes. Text layers
+ * are left out: lottie-roku turns them into overlays, which Motion draws.
+ *
+ * A layer's properties run on its own clock, the composition frame less its
+ * start time (`st`); its in and out points (`ip`, `op`) are composition
+ * frames, as lottie-web reads them.
+ */
+
+import { drawDocument } from '../player/overlay/overlay.js'
+import { clipToOperations, drawOperations } from './lottie.paint.js'
+import { fromLottie, IDENTITY, multiply, trace, transformPath } from './lottie.paths.js'
+import { evaluator } from './lottie.props.js'
+import { compileItems, compileTransform, runGroup, scalar } from './lottie.shapes.js'
+
+/** @import { Matrix } from './lottie.paths.js' */
+/** @import { Slots } from './lottie.props.js' */
+
+/** Lottie blend modes, by `bm`, as canvas composite operations */
+const BLENDS = [ 'source-over', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' ]
+
+/**
+ * @typedef {object} Context
+ * @property {Record<string, any>}                   assets     by id: precomp layer lists and image entries
+ * @property {Record<string, HTMLImageElement>}      images     by asset id
+ * @property {number}                                fps
+ * @property {Slots}                                 slots
+ * @property {import('../hit/hit.js').Hits}          [hits]     records the geometry of the groups pointer listeners target
+ * @property {(() => Record<string, string>) | null} [families] bundle font name → registered family, for text a precomp holds
+ * @property {string}                                [scope]    while a nested machine's layer draws, `<its nid>/`, which names the groups it records
+ */
+
+/**
+ * @param   {any[]}   layers
+ * @param   {Context} context
+ * @returns {any[]}           compiled layers, in the file's order (top first)
+ */
+export function compileLayers(layers, context) {
+  const compiled = []
+  for (let n = 0; n < (layers || []).length; n++) {
+    const layer = layers[n]
+    compiled.push(compileLayer(layer, context))
+  }
+  return compiled
+}
+
+/**
+ * @param {any}     layer
+ * @param {Context} context
+ */
+function compileLayer(layer, context) {
+  const slots = context.slots
+  const asset = layer.refId ? context.assets[layer.refId] : null
+  return {
+    ty: layer.ty,
+    ind: layer.ind,
+    parent: layer.parent,
+    hidden: !!layer.hd,
+    ip: layer.ip || 0,
+    op: layer.op === undefined ? Infinity : layer.op,
+    st: layer.st || 0,
+    sr: layer.sr || 1,
+    isMatte: layer.td === 1,
+    matte: layer.tt || 0,
+    blend: BLENDS[layer.bm || 0] || 'source-over',
+    transform: compileTransform(layer.ks, slots),
+    shapes: layer.ty === 4 ? compileItems(layer.shapes, slots) : null,
+    precomp: layer.ty === 0 && asset && asset.layers ? compileLayers(asset.layers, context) : null,
+    // a nested artboard's machine moves its precomp's time through the slot its `nid` names
+    // a text layer inside a precomp: a nested artboard's text a live value fills
+    text: layer.ty === 5 && layer.t && layer.t.d && layer.t.d.k && layer.t.d.k[0] ? { sid: typeof layer.t.d.sid === 'string' ? layer.t.d.sid : null, doc: layer.t.d.k[0].s } : null,
+    nid: typeof layer.nid === 'string' ? layer.nid : null,
+    timeRemap: layer.tm ? evaluator(typeof layer.nid === 'string' ? mergeSid(layer.tm, layer.nid) : layer.tm, slots, 0) : null,
+    // an artboard laid out to its place: its size is a property, which a layout band mixes
+    // a nested artboard that does not clip draws past its own edge
+    unclipped: layer.nc === 1,
+    size: layer.wh ? evaluator(layer.wh, slots, [ 0, 0 ]) : null,
+    width: layer.w || (asset && asset.w) || 0,
+    height: layer.h || (asset && asset.h) || 0,
+    image: layer.ty === 2 && layer.refId ? layer.refId : null,
+    // a data-bound image: the slot table says which asset to draw, anchored at the same fraction of it
+    imageSlot: layer.ty === 2 && typeof layer.isid === 'string' ? layer.isid : null,
+    origin: Array.isArray(layer.origin) ? layer.origin : null,
+    anchor: layer.ks && layer.ks.a && layer.ks.a.a !== 1 && Array.isArray(layer.ks.a.k) ? layer.ks.a.k : null,
+    solid: layer.ty === 1 ? { color: layer.sc || '#000000', width: layer.sw || 0, height: layer.sh || 0 } : null,
+    masks: compileMasks(layer, slots),
+  }
+}
+
+/**
+ * A copy of a property that reads a slot first.
+ *
+ * @param   {any}    property
+ * @param   {string} sid
+ * @returns {any}
+ */
+function mergeSid(property, sid) {
+  /** @type {Record<string, any>} */
+  const copy = {}
+  for (const key in property) copy[key] = property[key]
+  copy.sid = sid
+  return copy
+}
+
+/**
+ * @param {any}   layer
+ * @param {Slots} slots
+ */
+function compileMasks(layer, slots) {
+  if (!layer.hasMask || !Array.isArray(layer.masksProperties)) return []
+
+  const masks = []
+  for (let n = 0; n < layer.masksProperties.length; n++) {
+    const mask = layer.masksProperties[n]
+    if (mask.mode === 'n') continue
+    masks.push({ mode: mask.mode || 'a', inverted: !!mask.inv, path: evaluator(mask.pt, slots, { v: [], i: [], o: [], c: true }) })
+  }
+  return masks
+}
+
+// Drawing
+// ■■■■■■■
+
+/**
+ * Draws a list of layers at a composition frame.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any[]}                    layers  compiled, top first
+ * @param {Context}                  context
+ * @param {number}                   frame
+ * @param {Matrix}                   matrix  the composition's space onto the canvas
+ * @param {number}                   opacity
+ */
+export function drawLayers(ctx, layers, context, frame, matrix, opacity) {
+  const worlds = layerMatrices(layers, frame)
+  for (let n = layers.length - 1; n >= 0; n--) {
+    const layer = layers[n]
+    const isVisible = !layer.hidden && !layer.isMatte && frame >= layer.ip && frame < layer.op
+    if (!isVisible) continue
+
+    const matte = layer.matte && n > 0 && layers[n - 1].isMatte ? layers[n - 1] : null
+    if (matte) {
+      drawMatted(ctx, layer, matte, context, frame, multiply(matrix, worlds[n].matrix), multiply(matrix, worlds[n - 1].matrix), opacity * worlds[n].opacity)
+    } else {
+      drawLayer(ctx, layer, context, frame, multiply(matrix, worlds[n].matrix), opacity * worlds[n].opacity)
+    }
+  }
+}
+
+/**
+ * Each layer's matrix within the composition, through its parents. A parent
+ * passes on its transform, not its opacity.
+ *
+ * @param   {any[]}                                 layers
+ * @param   {number}                                frame
+ * @returns {{ matrix: Matrix, opacity: number }[]}
+ */
+function layerMatrices(layers, frame) {
+  /** @type {Record<string, number>} a layer's `ind` → its position */
+  const position = {}
+  for (let n = 0; n < layers.length; n++) if (layers[n].ind !== undefined) position[layers[n].ind] = n
+
+  // each layer's own transform, once: parents are shared
+  const own = layers.map((layer) => layer.transform(frame - layer.st))
+  const parentOf = (/** @type {any} */ layer) => (layer.parent !== undefined && position[layer.parent] !== undefined ? position[layer.parent] : -1)
+
+  return layers.map((layer, n) => {
+    let matrix = own[n].matrix
+    let parent = parentOf(layer)
+    // a parent chain is short; the guard only stops a cycle
+    for (let depth = 0; parent >= 0 && depth < 32; depth++) {
+      matrix = multiply(own[parent].matrix, matrix)
+      parent = parentOf(layers[parent])
+    }
+    return { matrix, opacity: own[n].opacity }
+  })
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any}                      layer
+ * @param {Context}                  context
+ * @param {number}                   frame   the composition's
+ * @param {Matrix}                   matrix  the layer's space onto the canvas
+ * @param {number}                   opacity
+ */
+function drawLayer(ctx, layer, context, frame, matrix, opacity) {
+  if (opacity <= 0) return
+  const local = frame - layer.st
+
+  ctx.save()
+  ctx.globalCompositeOperation = layer.blend
+  if (layer.masks.length) clipToMasks(ctx, layer.masks, local, matrix)
+
+  if (layer.shapes) {
+    const sink = context.hits && context.hits.active ? { hits: context.hits, matrix, prefix: context.scope || '' } : null
+    const run = runGroup(layer.shapes, local, IDENTITY, 1, sink)
+    drawOperations(ctx, run.operations, matrix, opacity, local)
+  } else if (layer.text) {
+    const live = layer.text.sid && typeof context.slots[layer.text.sid] === 'string' ? context.slots[layer.text.sid] : null
+    ctx.globalAlpha = opacity
+    drawDocument(ctx, layer.text.doc, live, context.families ? context.families() : {}, matrix)
+  } else if (layer.precomp) {
+    drawPrecomp(ctx, layer, context, local, matrix, opacity)
+  } else if (layer.solid) {
+    setTransform(ctx, matrix)
+    ctx.globalAlpha = opacity
+    ctx.fillStyle = layer.solid.color
+    ctx.fillRect(0, 0, layer.solid.width, layer.solid.height)
+  } else if (layer.image && context.images[imageOf(layer, context)]) {
+    const id = imageOf(layer, context)
+    const image = context.images[id]
+    setTransform(ctx, matrix)
+    ctx.globalAlpha = opacity
+    const asset = context.assets[id] || {}
+    const width = asset.w || image.width
+    const height = asset.h || image.height
+    // the layer's anchor is a fraction of the image it was authored with, so an image of another size moves to keep it
+    const shiftX = layer.origin && layer.anchor ? layer.anchor[0] - layer.origin[0] * width : 0
+    const shiftY = layer.origin && layer.anchor ? layer.anchor[1] - layer.origin[1] * height : 0
+    ctx.drawImage(image, shiftX, shiftY, width, height)
+  }
+  ctx.restore()
+}
+
+/**
+ * The asset an image layer draws: its slot's, when the slot table names one this animation holds.
+ *
+ * @param {any}     layer
+ * @param {Context} context
+ */
+function imageOf(layer, context) {
+  const live = layer.imageSlot ? context.slots[layer.imageSlot] : undefined
+  return typeof live === 'string' && context.images[live] ? live : layer.image
+}
+
+/**
+ * A precomp's own layers, on its own clock: the layer's time remap (seconds)
+ * when it has one, else the layer's time slowed by its stretch. Its
+ * width and height clip it.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any}                      layer
+ * @param {Context}                  context
+ * @param {number}                   local   the layer's own frame
+ * @param {Matrix}                   matrix
+ * @param {number}                   opacity
+ */
+function drawPrecomp(ctx, layer, context, local, matrix, opacity) {
+  const inner = layer.timeRemap ? scalar(layer.timeRemap(local)) * context.fps : local / layer.sr
+  const size = layer.size ? layer.size(local) : null
+  const width = size ? size[0] : layer.width
+  const height = size ? size[1] : layer.height
+  if (width && height && !layer.unclipped) {
+    setTransform(ctx, matrix)
+    ctx.beginPath()
+    ctx.rect(0, 0, width, height)
+    ctx.clip()
+  }
+  // a nested machine's shapes are named under the layer's `nid`, since its artboard numbers its objects from 0 too
+  const outer = context.scope
+  if (layer.nid) context.scope = layer.nid + '/'
+  drawLayers(ctx, layer.precomp, context, inner, matrix, opacity)
+  context.scope = outer
+}
+
+/**
+ * Clips to a layer's masks: added masks union, subtracted ones cut out
+ * (an even-odd clip with a frame around everything), intersected ones each
+ * clip again.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any[]}                    masks
+ * @param {number}                   local
+ * @param {Matrix}                   matrix
+ */
+function clipToMasks(ctx, masks, local, matrix) {
+  setTransform(ctx, matrix)
+  const path = (/** @type {any} */ mask) => {
+    const value = mask.path(local)
+    return fromLottie(Array.isArray(value) ? value[0] : value)
+  }
+  const huge = () => {
+    ctx.moveTo(-1e5, -1e5)
+    ctx.lineTo(1e5, -1e5)
+    ctx.lineTo(1e5, 1e5)
+    ctx.lineTo(-1e5, 1e5)
+    ctx.closePath()
+  }
+
+  const added = masks.filter((mask) => mask.mode === 'a' && !mask.inverted)
+  if (added.length) {
+    ctx.beginPath()
+    for (let n = 0; n < added.length; n++) trace(ctx, transformPath(path(added[n]), IDENTITY))
+    ctx.clip()
+  }
+  for (let n = 0; n < masks.length; n++) {
+    const mask = masks[n]
+    const cutsOut = mask.mode === 's' || (mask.mode === 'a' && mask.inverted)
+    if (!cutsOut && mask.mode !== 'i') continue
+    ctx.beginPath()
+    if (cutsOut) huge()
+    trace(ctx, path(mask))
+    ctx.clip(cutsOut ? 'evenodd' : 'nonzero')
+  }
+}
+
+/**
+ * A layer through its track matte. An alpha matte that is one opaque fill
+ * clips the layer to its path; any other is drawn with the layer on scratch
+ * canvases the size of the target, the content kept where the matte is
+ * opaque (alpha) or clear (inverted). Luma mattes are read as alpha mattes.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any}                      layer
+ * @param {any}                      matte
+ * @param {Context}                  context
+ * @param {number}                   frame
+ * @param {Matrix}                   matrix
+ * @param {Matrix}                   matteMatrix
+ * @param {number}                   opacity
+ */
+function drawMatted(ctx, layer, matte, context, frame, matrix, matteMatrix, opacity) {
+  if (clipsByPath(ctx, layer, matte, frame, matteMatrix)) {
+    drawLayer(ctx, layer, context, frame, matrix, opacity)
+    ctx.restore()
+    return
+  }
+
+  const width = ctx.canvas.width
+  const height = ctx.canvas.height
+  const content = takeScratch(width, height)
+  const mask = takeScratch(width, height)
+  if (!content || !mask) {
+    drawLayer(ctx, layer, context, frame, matrix, opacity)
+    return
+  }
+
+  drawLayer(content, layer, context, frame, matrix, opacity)
+  drawLayer(mask, matte, context, frame, matteMatrix, 1)
+  content.globalCompositeOperation = layer.matte === 2 || layer.matte === 4 ? 'destination-out' : 'destination-in'
+  content.setTransform(1, 0, 0, 1, 0, 0)
+  content.drawImage(mask.canvas, 0, 0)
+
+  ctx.save()
+  ctx.setTransform(1, 0, 0, 1, 0, 0)
+  ctx.drawImage(content.canvas, 0, 0)
+  ctx.restore()
+  giveScratch(mask)
+  giveScratch(content)
+}
+
+/**
+ * Clips to the matte's path when an alpha matte is one opaque fill, leaving
+ * the clip saved for the caller to restore.
+ *
+ * @param   {CanvasRenderingContext2D} ctx
+ * @param   {any}                      layer
+ * @param   {any}                      matte
+ * @param   {number}                   frame
+ * @param   {Matrix}                   matteMatrix
+ * @returns {boolean}                              whether it clipped
+ */
+function clipsByPath(ctx, layer, matte, frame, matteMatrix) {
+  const isPlainShapes = layer.matte === 1 && matte.shapes && !matte.masks.length && matte.blend === 'source-over'
+  if (!isPlainShapes) return false
+
+  const local = frame - matte.st
+  const run = runGroup(matte.shapes, local, IDENTITY, 1, null)
+  ctx.save()
+  if (clipToOperations(ctx, run.operations, matteMatrix, local)) return true
+  ctx.restore()
+  return false
+}
+
+/** scratch canvases free for a matte to draw on; a matte inside a matte takes others */
+const SCRATCH = /** @type {CanvasRenderingContext2D[]} */ ([])
+
+/**
+ * A cleared scratch canvas of the size, reused across frames: a matte drawn
+ * every frame would otherwise make two canvases a frame.
+ *
+ * @param   {number}                          width
+ * @param   {number}                          height
+ * @returns {CanvasRenderingContext2D | null}
+ */
+function takeScratch(width, height) {
+  const ctx = SCRATCH.pop() || document.createElement('canvas').getContext('2d')
+  if (!ctx) return null
+  const canvas = ctx.canvas
+  // setting the size clears it; a canvas already that size is cleared by hand
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width
+    canvas.height = height
+  } else {
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.globalAlpha = 1
+    ctx.clearRect(0, 0, width, height)
+  }
+  return ctx
+}
+
+/** @param {CanvasRenderingContext2D} ctx */
+function giveScratch(ctx) {
+  SCRATCH.push(ctx)
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Matrix}                   m
+ */
+function setTransform(ctx, m) {
+  ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5])
+}

package/lottie/lottie.paint.js

@@ -0,0 +1,238 @@
+/**
+ * Draw operations onto a 2D canvas: fills, strokes, gradients and dashes,
+ * each in its own group's space so stroke widths and gradient points come
+ * out as authored. Merged paths in intersect mode (`mm` 4, how rive2lottie
+ * writes clipping) draw as their first part clipped by the rest.
+ */
+
+import { multiply, trace, transformPath } from './lottie.paths.js'
+import { scalar } from './lottie.shapes.js'
+
+/** @import { Matrix } from './lottie.paths.js' */
+/** @import { Entry, Operation } from './lottie.shapes.js' */
+
+/**
+ * Draws a layer's operations, bottom first.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Operation[]}              operations top first, as runGroup returns them
+ * @param {Matrix}                   layer      the layer's space onto the canvas
+ * @param {number}                   opacity    the layer's
+ * @param {number}                   frame
+ */
+export function drawOperations(ctx, operations, layer, opacity, frame) {
+  for (let n = operations.length - 1; n >= 0; n--) {
+    const operation = operations[n]
+    const alpha = opacity * operation.opacity * (scalar(operation.paint.opacity(frame)) / 100)
+    if (alpha <= 0 || !operation.entries.length) continue
+
+    const m = multiply(layer, operation.matrix)
+    ctx.save()
+    ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5])
+    ctx.globalAlpha = Math.min(1, alpha)
+    paint(ctx, operation, frame)
+    ctx.restore()
+  }
+}
+
+/**
+ * Clips to what a layer's operations cover, when that is exactly one opaque
+ * solid fill: an alpha matte of it keeps the same pixels as a clip to its
+ * path, at none of a matte's offscreen cost. Anything else (strokes,
+ * gradients, transparency, several paints, merged paths) returns false and
+ * clips nothing.
+ *
+ * @param   {CanvasRenderingContext2D} ctx
+ * @param   {Operation[]}              operations as runGroup returns them
+ * @param   {Matrix}                   layer      the layer's space onto the canvas
+ * @param   {number}                   frame
+ * @returns {boolean}                             whether it clipped
+ */
+export function clipToOperations(ctx, operations, layer, frame) {
+  if (operations.length !== 1) return false
+  const operation = operations[0]
+  const style = operation.paint
+  const isOpaque = operation.opacity >= 1 && scalar(style.opacity(frame)) >= 100
+  const isSolidFill = !style.isStroke && !style.isGradient && (style.color(frame).length < 4 || style.color(frame)[3] >= 1)
+  if (!isOpaque || !isSolidFill || !operation.entries.length) return false
+  for (let n = 0; n < operation.entries.length; n++) if (operation.entries[n].holder.merge) return false
+
+  const m = multiply(layer, operation.matrix)
+  ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5])
+  ctx.beginPath()
+  for (let n = 0; n < operation.entries.length; n++) traceEntry(ctx, operation.entries[n])
+  ctx.clip(style.rule)
+  return true
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Operation}                operation
+ * @param {number}                   frame
+ */
+function paint(ctx, operation, frame) {
+  const style = operation.paint
+  const fill = style.isGradient ? gradient(ctx, style.gradient, frame) : color(style.color(frame))
+  if (style.isStroke) strokeStyle(ctx, style, fill, frame)
+  else ctx.fillStyle = fill
+
+  const plain = []
+  for (let n = 0; n < operation.entries.length; n++) {
+    const entry = operation.entries[n]
+    if (entry.holder.merge) drawMerged(ctx, entry, style)
+    else plain.push(entry)
+  }
+  if (!plain.length) return
+
+  ctx.beginPath()
+  for (let n = 0; n < plain.length; n++) traceEntry(ctx, plain[n])
+  if (style.isStroke) ctx.stroke()
+  else ctx.fill(style.rule)
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Entry}                    entry
+ */
+function traceEntry(ctx, entry) {
+  const paths = entry.holder.paths
+  for (let k = 0; k < paths.length; k++) trace(ctx, transformPath(paths[k], entry.matrix))
+}
+
+/**
+ * A merge: intersect clips the first part by each of the rest; the other
+ * modes draw every part as one path, which is exactly `mm` 1 (merge) and
+ * close to add, and what lottie-web's canvas renderer does for them too.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Entry}                    entry
+ * @param {any}                      style
+ */
+function drawMerged(ctx, entry, style) {
+  const merge = /** @type {{ mode: number, parts: Entry[] }} */ (entry.holder.merge)
+  const parts = merge.parts.map((part) => ({ holder: part.holder, matrix: multiply(entry.matrix, part.matrix) }))
+
+  ctx.save()
+  if (merge.mode === 4) {
+    for (let n = 1; n < parts.length; n++) {
+      ctx.beginPath()
+      traceEntry(ctx, parts[n])
+      ctx.clip()
+    }
+    ctx.beginPath()
+    traceEntry(ctx, parts[0])
+  } else {
+    ctx.beginPath()
+    for (let n = 0; n < parts.length; n++) traceEntry(ctx, parts[n])
+  }
+  if (style.isStroke) ctx.stroke()
+  else ctx.fill(merge.mode === 5 || merge.mode === 3 ? 'evenodd' : style.rule)
+  ctx.restore()
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any}                      style
+ * @param {any}                      fill
+ * @param {number}                   frame
+ */
+function strokeStyle(ctx, style, fill, frame) {
+  ctx.strokeStyle = fill
+  ctx.lineWidth = scalar(style.width(frame))
+  ctx.lineCap = style.cap
+  ctx.lineJoin = style.join
+  ctx.miterLimit = style.miter
+
+  // older browsers have no line dashes; their strokes stay solid
+  if (!style.dashes.length || typeof ctx.setLineDash !== 'function') return
+  const lengths = []
+  let offset = 0
+  for (let n = 0; n < style.dashes.length; n++) {
+    const dash = style.dashes[n]
+    const value = scalar(dash.value(frame))
+    if (dash.kind === 'o') offset = value
+    else lengths.push(Math.max(0, value))
+  }
+  ctx.setLineDash(lengths)
+  ctx.lineDashOffset = offset
+}
+
+/**
+ * A Lottie colour, `[r, g, b]` or `[r, g, b, a]` in 0-1, as CSS.
+ *
+ * @param   {number[]} rgba
+ * @returns {string}
+ */
+export function color(rgba) {
+  const channel = (/** @type {number} */ value) => Math.round(Math.max(0, Math.min(1, value)) * 255)
+  const alpha = rgba.length > 3 ? Math.max(0, Math.min(1, rgba[3])) : 1
+  return 'rgba(' + channel(rgba[0]) + ',' + channel(rgba[1]) + ',' + channel(rgba[2]) + ',' + alpha + ')'
+}
+
+/**
+ * A linear or radial gradient in the paint's group space. A radial
+ * gradient's highlight moves its focal point, as lottie-web's does.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {any}                      spec
+ * @param {number}                   frame
+ */
+function gradient(ctx, spec, frame) {
+  const s = spec.start(frame)
+  const e = spec.end(frame)
+  let canvasGradient
+  if (spec.type === 2) {
+    const dx = e[0] - s[0]
+    const dy = e[1] - s[1]
+    const radius = Math.sqrt(dx * dx + dy * dy)
+    const highlight = Math.max(-0.99, Math.min(0.99, scalar(spec.highlight(frame)) / 100))
+    const angle = Math.atan2(dy, dx) + (scalar(spec.angle(frame)) * Math.PI) / 180
+    const fx = s[0] + Math.cos(angle) * radius * highlight
+    const fy = s[1] + Math.sin(angle) * radius * highlight
+    canvasGradient = ctx.createRadialGradient(fx, fy, 0, s[0], s[1], radius)
+  } else {
+    canvasGradient = ctx.createLinearGradient(s[0], s[1], e[0], e[1])
+  }
+
+  const stops = colorStops(spec.stops(frame), spec.count)
+  for (let n = 0; n < stops.length; n++) canvasGradient.addColorStop(stops[n].offset, stops[n].color)
+  return canvasGradient
+}
+
+/**
+ * Lottie's gradient data: `count` colour stops `[offset, r, g, b]`, then
+ * optional opacity stops `[offset, alpha]`. Each colour stop takes the
+ * opacity interpolated at its offset.
+ *
+ * @param   {number[]}                            data
+ * @param   {number}                              count
+ * @returns {{ offset: number, color: string }[]}
+ */
+export function colorStops(data, count) {
+  const alphas = []
+  for (let n = count * 4; n + 1 < data.length; n += 2) alphas.push([ data[n], data[n + 1] ])
+
+  const stops = []
+  for (let n = 0; n < count; n++) {
+    const offset = Math.max(0, Math.min(1, data[n * 4]))
+    const alpha = alphas.length ? alphaAt(alphas, offset) : 1
+    stops.push({ offset, color: color([ data[n * 4 + 1], data[n * 4 + 2], data[n * 4 + 3], alpha ]) })
+  }
+  return stops
+}
+
+/**
+ * @param {number[][]} alphas `[offset, alpha]`, in offset order
+ * @param {number}     offset
+ */
+function alphaAt(alphas, offset) {
+  if (offset <= alphas[0][0]) return alphas[0][1]
+  for (let n = 1; n < alphas.length; n++) {
+    if (offset <= alphas[n][0]) {
+      const [ a, va ] = alphas[n - 1]
+      const [ b, vb ] = alphas[n]
+      return b > a ? va + ((vb - va) * (offset - a)) / (b - a) : vb
+    }
+  }
+  return alphas[alphas.length - 1][1]
+}