react-msaview 8.4.1 → 9.1.0

package/src/components/tree/CladeLabels.tsx

@@ -3,13 +3,7 @@ import React from 'react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import {
-  bracketGap,
-  cladeHeight,
-  cladeInGutter,
-  cladeLabelHorizontal,
-  cladeLabelOffset,
-} from './cladeBrackets.ts'
+import { cladeLabelBoxes } from './cladeBrackets.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -20,56 +14,38 @@ import type { MsaViewModel } from '../../model.ts'
  * the same labels with a `rotate(-90)`.
  */
 const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
-  const {
-    resolvedClades,
-    cladeGutterWidth,
-    rowHeight,
-    treeAreaWidth,
-    fontSize,
-  } = model
   const theme = useTheme()
-  if (cladeGutterWidth === 0) {
-    return null
-  }
-  const gutterLeft = treeAreaWidth - cladeGutterWidth
+  const { fontSize } = model
   return (
     <>
-      {resolvedClades.map((clade, index) => {
-        const { label, markColor, rows } = clade
-        if (!label || !cladeInGutter(clade)) {
-          return null
-        }
-        const left = gutterLeft + cladeLabelOffset(clade)
-        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        return (
-          <div
-            key={`${rows[0]}-${rows[1]}-${index}`}
-            title={label}
-            style={{
-              position: 'absolute',
-              left,
-              top: rows[0] * rowHeight,
-              width: treeAreaWidth - left - bracketGap,
-              height: cladeHeight(clade, rowHeight),
-              display: 'flex',
-              alignItems: 'center',
-              color: markColor ?? theme.palette.text.primary,
-              fontSize,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              pointerEvents: 'none',
-              // vertical-rl reads top to bottom, and the half turn makes it
-              // read upwards, which is what rotate(-90) exports
-              ...(horizontal
-                ? {}
-                : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }),
-            }}
-          >
-            {label}
-          </div>
-        )
-      })}
+      {cladeLabelBoxes(model).map(box => (
+        <div
+          key={box.key}
+          title={box.label}
+          style={{
+            position: 'absolute',
+            left: box.left,
+            top: box.top,
+            width: box.width,
+            height: box.height,
+            display: 'flex',
+            alignItems: 'center',
+            color: box.color ?? theme.palette.text.primary,
+            fontSize,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            // vertical-rl reads top to bottom, and the half turn makes it
+            // read upwards, which is what rotate(-90) exports
+            ...(box.horizontal
+              ? {}
+              : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }),
+          }}
+        >
+          {box.label}
+        </div>
+      ))}
     </>
   )
 })

package/src/components/tree/TreeCanvas.tsx

@@ -13,7 +13,13 @@ import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { height, blocksY, treeAreaWidth, scrollY, highResScaleFactor } = model
+  const {
+    height,
+    blocksY,
+    effectiveTreeAreaWidth,
+    scrollY,
+    highResScaleFactor,
+  } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -22,7 +28,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  const canvasWidth = treeAreaWidth * highResScaleFactor
+  const canvasWidth = effectiveTreeAreaWidth * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const mouseoverRef = useCanvasAutorun({
     draw: ctx => {
@@ -43,7 +49,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         height,
         position: 'relative',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
       }}
     >
       {/* one transform for the whole block set, matching MSACanvas: the tree
@@ -70,7 +76,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
           position: 'absolute',
           top: 0,
           left: 0,
-          width: treeAreaWidth,
+          width: effectiveTreeAreaWidth,
           height,
           zIndex: 1000,
           pointerEvents: 'none',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -37,9 +37,9 @@ const TreeCanvasBlock = observer(function ({
   )
   const hovered = anchor?.value
 
-  const { treeAreaWidth, blockSize, highResScaleFactor } = model
-  // TreePanel clips to treeAreaWidth, so a wider canvas is wasted backing store
-  const width = treeAreaWidth
+  const { effectiveTreeAreaWidth, blockSize, highResScaleFactor } = model
+  // TreePanel clips to the tree area, so a wider canvas is wasted backing store
+  const width = effectiveTreeAreaWidth
   const height = blockSize
 
   const canvasWidth = width * highResScaleFactor
@@ -121,7 +121,7 @@ const TreeCanvasBlock = observer(function ({
 
       {anchor ? (
         <BaseTooltip clientPoint={anchor.clientPoint}>
-          {anchor.value.name}
+          {anchor.value.label ?? anchor.value.name}
         </BaseTooltip>
       ) : null}
     </>

package/src/components/tree/TreeOverview.tsx

@@ -21,10 +21,10 @@ import type { MsaViewModel } from '../../model.ts'
  * moving across it costs are a blit and two boxes.
  */
 const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth, overviewHeight, highResScaleFactor } = model
+  const { effectiveTreeAreaWidth, overviewHeight, highResScaleFactor } = model
   const theme = useTheme()
   const [hover, setHover] = useState<{ id: string; rows: [number, number] }>()
-  const width = Math.round(treeAreaWidth * highResScaleFactor)
+  const width = Math.round(effectiveTreeAreaWidth * highResScaleFactor)
   const height = Math.round(overviewHeight * highResScaleFactor)
 
   const ref = useCanvasAutorun({
@@ -34,12 +34,17 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
       const image = treeOverviewImage({
         model,
         theme,
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
         scale: highResScaleFactor,
       })
       ctx.scale(highResScaleFactor, highResScaleFactor)
-      const box = { model, ctx, width: treeAreaWidth, height: overviewHeight }
+      const box = {
+        model,
+        ctx,
+        width: effectiveTreeAreaWidth,
+        height: overviewHeight,
+      }
       if (image) {
         ctx.drawImage(
           image,
@@ -86,7 +91,7 @@ const TreeOverview = observer(function ({ model }: { model: MsaViewModel }) {
         display: 'block',
         flexShrink: 0,
         cursor: 'pointer',
-        width: treeAreaWidth,
+        width: effectiveTreeAreaWidth,
         height: overviewHeight,
       }}
       onMouseMove={event => {

package/src/components/tree/TreePanel.tsx

@@ -7,9 +7,15 @@ import TreeCanvas from './TreeCanvas.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
-  const { treeAreaWidth } = model
+  const { effectiveTreeAreaWidth } = model
   return (
-    <div style={{ overflow: 'hidden', flexShrink: 0, width: treeAreaWidth }}>
+    <div
+      style={{
+        overflow: 'hidden',
+        flexShrink: 0,
+        width: effectiveTreeAreaWidth,
+      }}
+    >
       <TreeCanvas model={model} />
     </div>
   )

package/src/components/tree/TreeRuler.tsx

@@ -13,13 +13,17 @@ import type { MsaViewModel } from '../../model.ts'
 // scale bar: without one the branch lengths are drawn to a scale nothing
 // states.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth, marginLeft, treeScaleBar: bar } = model
+  const { effectiveTreeAreaWidth, marginLeft, treeScaleBar: bar } = model
   const theme = useTheme()
 
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+    <div style={{ flexShrink: 0, width: effectiveTreeAreaWidth }}>
       {bar ? (
-        <svg width={treeAreaWidth} height={h} style={{ display: 'block' }}>
+        <svg
+          width={effectiveTreeAreaWidth}
+          height={h}
+          style={{ display: 'block' }}
+        >
           <ScaleBarSVG
             bar={bar}
             marginLeft={marginLeft}

package/src/components/tree/cladeBrackets.ts

@@ -1,6 +1,8 @@
+import { labelFitFontSize } from '../../constants.ts'
 import { measureTextCanvas } from '../../measureTextCanvas.ts'
 
-import type { ResolvedClade } from '../../types.ts'
+import type { MsaViewModel } from '../../model.ts'
+import type { Clade, ResolvedClade } from '../../types.ts'
 
 // The bar of the bracket mark and the space around it, in px.
 export const bracketBarWidth = 3
@@ -11,14 +13,14 @@ export const bracketGap = 4
 export const maxCladeGutterWidth = 140
 
 /** whether a clade draws in the gutter: a bracket, or a highlight with a label */
-export function cladeInGutter(clade: ResolvedClade) {
+export function cladeInGutter(clade: Pick<Clade, 'mark' | 'label'>) {
   return (
     clade.mark === 'bracket' || (clade.mark === 'highlight' && !!clade.label)
   )
 }
 
 /** the pixel height of the rows a clade covers */
-export function cladeHeight(clade: ResolvedClade, rowHeight: number) {
+function cladeHeight(clade: ResolvedClade, rowHeight: number) {
   return (clade.rows[1] - clade.rows[0] + 1) * rowHeight
 }
 
@@ -26,7 +28,7 @@ export function cladeHeight(clade: ResolvedClade, rowHeight: number) {
  * Whether a label reads across the rows. It does where they are taller than the
  * font, and runs up the bar where they are not.
  */
-export function cladeLabelHorizontal(
+function cladeLabelHorizontal(
   clade: ResolvedClade,
   rowHeight: number,
   fontSize: number,
@@ -35,7 +37,7 @@ export function cladeLabelHorizontal(
 }
 
 /** the px between the left edge of the gutter and the label's own column */
-export function cladeLabelOffset(clade: ResolvedClade) {
+function cladeLabelOffset(clade: Pick<Clade, 'mark'>) {
   return clade.mark === 'bracket'
     ? bracketGap + bracketBarWidth + bracketGap
     : bracketGap
@@ -43,27 +45,19 @@ export function cladeLabelOffset(clade: ResolvedClade) {
 
 /**
  * The gutter the bracket mark needs at the right of the tree area: the bar plus
- * the widest label at the tree font, zero where no clade draws there, and at
- * most maxCladeGutterWidth.
+ * the widest label read across at labelFitFontSize, zero where no clade draws
+ * there, and at most maxCladeGutterWidth. The records size it, so a zoom, a
+ * collapse or a focus leaves it as it is, and a renderer clips a label that
+ * outgrows it.
  */
-export function cladeGutterWidth({
-  clades,
-  rowHeight,
-  fontSize,
-}: {
-  clades: ResolvedClade[]
-  rowHeight: number
-  fontSize: number
-}) {
+export function cladeGutterWidth(clades: Pick<Clade, 'mark' | 'label'>[]) {
   let widest = 0
   for (const clade of clades) {
     if (!cladeInGutter(clade)) {
       continue
     }
     const text = clade.label
-      ? cladeLabelHorizontal(clade, rowHeight, fontSize)
-        ? measureTextCanvas(clade.label, fontSize)
-        : fontSize
+      ? measureTextCanvas(clade.label, labelFitFontSize)
       : 0
     widest = Math.max(widest, cladeLabelOffset(clade) + text + bracketGap)
   }
@@ -71,3 +65,49 @@ export function cladeGutterWidth({
   // the measurement here sized the gutter for
   return Math.min(maxCladeGutterWidth, Math.ceil(widest))
 }
+
+/**
+ * The box each gutter label takes, in unscrolled tree-area px: from the
+ * label's column to the right edge of the gutter, across the clade's rows. The
+ * live view sets DOM text in it, and the SVG export a `<text>`.
+ */
+export function cladeLabelBoxes(
+  model: Pick<
+    MsaViewModel,
+    | 'resolvedClades'
+    | 'cladeGutterWidth'
+    | 'rowHeight'
+    | 'effectiveTreeAreaWidth'
+    | 'fontSize'
+  >,
+) {
+  const {
+    resolvedClades,
+    cladeGutterWidth,
+    rowHeight,
+    effectiveTreeAreaWidth,
+    fontSize,
+  } = model
+  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
+  return cladeGutterWidth === 0
+    ? []
+    : resolvedClades.flatMap((clade, index) => {
+        const { label, markColor, rows } = clade
+        if (!label || !cladeInGutter(clade)) {
+          return []
+        }
+        const left = gutterLeft + cladeLabelOffset(clade)
+        return [
+          {
+            key: `${rows[0]}-${rows[1]}-${index}`,
+            label,
+            color: markColor,
+            left,
+            top: rows[0] * rowHeight,
+            width: effectiveTreeAreaWidth - left - bracketGap,
+            height: cladeHeight(clade, rowHeight),
+            horizontal: cladeLabelHorizontal(clade, rowHeight, fontSize),
+          },
+        ]
+      })
+}

package/src/components/tree/clickMap.ts

@@ -2,6 +2,8 @@ import Flatbush from 'flatbush'
 
 export interface ClickEntry {
   name: string
+  /** the text a tip label draws, which may be cut short */
+  label?: string
   id: string
   branch?: boolean
   minX: number

package/src/components/tree/ellipsize.ts

@@ -0,0 +1,24 @@
+const ellipsis = '…'
+
+/**
+ * the longest prefix of `text`, plus an ellipsis, that measures at most
+ * `room` px
+ */
+export function ellipsize(
+  measure: (text: string) => number,
+  text: string,
+  room: number,
+) {
+  const width = measure(text)
+  if (width <= room) {
+    return { text, width }
+  }
+  for (let n = Math.floor((text.length * room) / width); n > 0; n--) {
+    const truncated = text.slice(0, n).trimEnd() + ellipsis
+    const truncatedWidth = measure(truncated)
+    if (truncatedWidth <= room) {
+      return { text: truncated, width: truncatedWidth }
+    }
+  }
+  return { text: '', width: 0 }
+}

package/src/components/tree/renderTreeCanvas.ts

@@ -8,6 +8,7 @@ import {
 } from '../msa/renderHighlights.ts'
 import { referenceColor } from '../overlayColors.ts'
 import { bracketBarWidth, bracketGap } from './cladeBrackets.ts'
+import { ellipsize } from './ellipsize.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -35,7 +36,7 @@ function inYBlock(y: number, offsetY: number, by: number, pad: number) {
 /**
  * Every node whose subtree reaches into the block, skipping the subtrees that
  * do not. A subtree's leaves are one contiguous run of rows, recorded by
- * clusterLayout as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
+ * layoutTree as xMin/xMax, so a block of a 200k-tip tree visits a few dozen
  * nodes.
  *
  * A link out of a visited node is drawn even when its child is pruned, so a
@@ -382,9 +383,8 @@ function renderTreeLabels({
     treeAreaWidthMinusMargin,
     marginLeft,
     noTree,
-    labelWidthMap,
-    labelWidthScale,
   } = model
+  const treeDrawn = drawTree && !noTree
   const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
   // same slice the MSA renderer uses instead of walking every tip per block
@@ -412,22 +412,22 @@ function renderTreeLabels({
       // fontSize/4 below the row center, the baseline the alignment letters
       // share
       const yp = y + fontSize / 4
-      let xp = 0
-      if (!noTree) {
-        xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
-      }
-
-      const measured = labelWidthMap.get(name)
-      const width =
-        measured === undefined
-          ? ctx.measureText(displayName).width
-          : measured * labelWidthScale
+      const xp = treeDrawn
+        ? (getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0)
+        : 0
+      const fit = (room: number) =>
+        ellipsize(text => ctx.measureText(text).width, displayName, room)
+      // a label cut to nothing still gets a click box the font size wide
+      const boxWidth = (width: number) => Math.max(width, fontSize)
 
       ctx.fillStyle = tipLabelColors?.get(name) ?? theme.palette.text.primary
       if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
-        if (drawTree && !noTree) {
+        const { text, width } = fit(
+          offset - (treeDrawn ? xp + radius + 2 + smallPadding : 0),
+        )
+        if (treeDrawn) {
           // beginPath is load-bearing: without it every leader line re-strokes
           // all the ones before it, which is quadratic in the label count
           ctx.beginPath()
@@ -435,28 +435,31 @@ function renderTreeLabels({
           ctx.lineTo(offset - smallPadding - width, y)
           ctx.stroke()
         }
-        ctx.fillText(displayName, offset, yp)
+        ctx.fillText(text, offset, yp)
         // everything here is drawn under translate(marginLeft), so the click box
         // has to be the text's own right edge in that same space -- taking
-        // treeAreaWidth instead put the target smallPadding off the label
+        // the tree area width instead put the target smallPadding off the label
         const labelRight = offset + marginLeft
         clickMap?.insert({
-          minX: labelRight - width,
+          minX: labelRight - boxWidth(width),
           maxX: labelRight,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id,
         })
       } else {
-        const labelX = noTree ? 2 : xp + d
-        ctx.fillText(displayName, labelX, yp)
+        const labelX = treeDrawn ? xp + d : 2
+        const { text, width } = fit(treeAreaWidthMinusMargin - labelX)
+        ctx.fillText(text, labelX, yp)
         clickMap?.insert({
           minX: labelX + marginLeft,
-          maxX: labelX + width + marginLeft,
+          maxX: labelX + boxWidth(width) + marginLeft,
           minY: yp - emHeight,
           maxY: yp,
           name,
+          label: displayName,
           id,
         })
       }
@@ -502,12 +505,12 @@ function renderCladeHighlights({
     hierarchy,
     showBranchLenEffective: showBranchLen,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  const right = treeAreaWidth - marginLeft
+  const right = effectiveTreeAreaWidth - marginLeft
   for (const { rows, color, mark } of resolvedClades) {
     if (mark !== 'highlight') {
       continue
@@ -548,7 +551,7 @@ function renderCladeBrackets({
     resolvedClades,
     cladeGutterWidth,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
@@ -557,7 +560,7 @@ function renderCladeBrackets({
   }
   const by = blockSizeYOverride ?? blockSize
   const x =
-    treeAreaWidth -
+    effectiveTreeAreaWidth -
     marginLeft -
     cladeGutterWidth +
     bracketGap +
@@ -600,7 +603,7 @@ function renderRowHighlights({
     rowTints,
     referenceRowIndex,
     rowHeight,
-    treeAreaWidth,
+    effectiveTreeAreaWidth,
     marginLeft,
     blockSize,
   } = model
@@ -608,7 +611,12 @@ function renderRowHighlights({
   const pad = blockPad(model)
   const placed: LabelBox[] = []
   const fillRow = (index: number) => {
-    ctx.fillRect(-marginLeft, index * rowHeight, treeAreaWidth, rowHeight)
+    ctx.fillRect(
+      -marginLeft,
+      index * rowHeight,
+      effectiveTreeAreaWidth,
+      rowHeight,
+    )
   }
   if (rowTints) {
     const top = Math.max(0, Math.floor((offsetY - pad) / rowHeight))
@@ -647,8 +655,8 @@ function renderRowHighlights({
         label,
         x: -marginLeft + 2,
         y: first * rowHeight,
-        spanWidth: treeAreaWidth,
-        bounds: { min: -marginLeft, max: treeAreaWidth - marginLeft },
+        spanWidth: effectiveTreeAreaWidth,
+        bounds: { min: -marginLeft, max: effectiveTreeAreaWidth - marginLeft },
         placed,
       })
     }
@@ -698,14 +706,7 @@ export function renderTreeCanvas({
 
   // memoized on the model and shared across the tree/bubble/label passes (and
   // across all tree blocks) rather than re-traversing the hierarchy in each
-  const { maxBranchLength, maxDepthToLeaf, showBranchLenEffective, treeWidth } =
-    model
-  // pixel x of the tips. A phylogram scales branch lengths so the longest
-  // root-to-tip path lands at maxBranchLength; a cladogram ignores lengths and
-  // spreads topological depth across the whole tree area instead. Reusing
-  // maxBranchLength for the cladogram would pin every node to x=0 for a tree
-  // with no branch lengths -- which is exactly what forces cladogram mode.
-  const tipX = showBranchLenEffective ? maxBranchLength : treeWidth
+  const { maxDepthToLeaf, effectiveTreeWidth: tipX } = model
   // built once for all three passes: each of them asks about a different node on
   // every block of every redraw, and `collapsed` is a list
   const collapsedSet = new Set(model.collapsed)

package/src/components/tree/renderTreeMouseover.ts

@@ -11,7 +11,7 @@ export function renderTreeMouseover({
 }) {
   const {
     rowHeight,
-    treeAreaWidth: width,
+    effectiveTreeAreaWidth: width,
     height,
     scrollY,
     mouseRow,

package/src/components/tree/renderTreeOverview.ts

@@ -1,4 +1,5 @@
 import { descendants } from '../../hierarchy.ts'
+import { makeOffscreenCanvas } from '../msa/msaRaster.ts'
 import { getNodeX } from './renderTreeCanvas.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -62,10 +63,10 @@ export function drawTreeOverview({
       continue
     }
     const sx = nodeX(source)
-    const sy = rowY(source.x!)
+    const sy = rowY(source.x)
     for (const target of source.children) {
       const tx = nodeX(target)
-      const ty = rowY(target.x!)
+      const ty = rowY(target.x)
       if (Math.abs(tx - sx) < 1 && Math.abs(ty - sy) < 1) {
         continue
       }
@@ -158,17 +159,8 @@ function overviewKeys({
   ]
 }
 
-function makeCanvas(width: number, height: number) {
-  const canvas =
-    typeof OffscreenCanvas !== 'undefined'
-      ? new OffscreenCanvas(width, height)
-      : typeof document !== 'undefined'
-        ? Object.assign(document.createElement('canvas'), { width, height })
-        : undefined
-  const ctx = canvas?.getContext('2d')
-  return ctx && typeof (ctx as CanvasRenderingContext2D).stroke === 'function'
-    ? { canvas: canvas as RasterCanvas, ctx: ctx as CanvasRenderingContext2D }
-    : undefined
+function canStroke(ctx: unknown): ctx is CanvasRenderingContext2D {
+  return typeof (ctx as CanvasRenderingContext2D | null)?.stroke === 'function'
 }
 
 /**
@@ -198,9 +190,10 @@ export function treeOverviewImage({
   if (prev && keys.every((key, i) => key === prev.keys[i])) {
     return prev.canvas
   }
-  const made = makeCanvas(
+  const made = makeOffscreenCanvas(
     Math.max(1, Math.round(width * scale)),
     Math.max(1, Math.round(height * scale)),
+    canStroke,
   )
   if (made) {
     made.ctx.scale(scale, scale)