ggaction 0.0.13 → 0.0.15

package/src/materialization/selection/items/bar.js

@@ -10,6 +10,7 @@ import {
 import { numericExtent } from "../../../grammar/numeric.js";
 import {
   readNominalField,
+  readScaleField,
   readTemporalField
 } from "../../../grammar/scales/index.js";
 import { findSemanticScale } from "../../../selectors/scales.js";
@@ -52,9 +53,19 @@ function aggregateCellDefinitions(program, layer, dataset) {
   const offsetChannel = resolveBarOffsetChannel(layer);
   const offsetScale = program.resolvedScales[layer.encoding?.[offsetChannel]?.scale];
   const layout = resolveBarColorLayout(layer);
+  const stroke = layer.encoding?.stroke;
 
   function definition(cell, start, end) {
     const members = aggregateMembers(dataset.values, layer, cell, channels);
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Bar stroke requires one value within each aggregate cell.");
+    }
     return {
       fields: uniqueFields(members),
       channels: {
@@ -62,6 +73,7 @@ function aggregateCellDefinitions(program, layer, dataset) {
         [channels.measure]: start,
         [`${channels.measure}2`]: end,
         ...(cell.color === undefined ? {} : { color: cell.color }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] }),
         ...(layer.encoding?.[offsetChannel] === undefined
           ? {}
           : { [offsetChannel]: cell.series ?? cell.color })
@@ -88,8 +100,18 @@ function histogramDefinitions(program, layer, dataset) {
     resolvedScales: program.resolvedScales
   });
   const colorScale = program.resolvedScales[colorEncoding?.scale];
+  const stroke = layer.encoding?.stroke;
   return segments.map(segment => {
     const colorValue = segment.colorValue ?? colorScale?.domain[segment.category];
+    const strokeValues = stroke === undefined ? undefined : readScaleField(
+      segment.members,
+      stroke.field,
+      stroke.fieldType,
+      { temporalUnit: stroke.temporalUnit }
+    );
+    if (strokeValues !== undefined && new Set(strokeValues).size !== 1) {
+      throw new Error("Histogram stroke requires one value within each bin/series cell.");
+    }
     return {
       fields: uniqueFields(segment.members),
       channels: {
@@ -97,7 +119,8 @@ function histogramDefinitions(program, layer, dataset) {
         x2: segment.end,
         y: segment.stackStart,
         y2: segment.stackEnd,
-        ...(colorValue === undefined ? {} : { color: colorValue })
+        ...(colorValue === undefined ? {} : { color: colorValue }),
+        ...(strokeValues === undefined ? {} : { stroke: strokeValues[0] })
       },
       members: segment.members
     };
@@ -188,14 +211,18 @@ export function resolveBarItems(program, layer, dataset, selectionGrain) {
   if (definitions === undefined) {
     throw new Error(`Bar mark "${layer.id}" is incomplete for selection.`);
   }
+  const graphicTypes = Object.hasOwn(
+    program.markConfigs[layer.id]?.barAppearance ?? {},
+    "cornerRadius"
+  ) ? ["rect", "path"] : "rect";
   if (selectionGrain === "stack") {
     return finalizeItems(
       program,
       layer,
       "stack",
       barStackDefinitions(layer, grain, definitions),
-      "rect"
+      graphicTypes
     );
   }
-  return finalizeItems(program, layer, grain, definitions, "rect");
+  return finalizeItems(program, layer, grain, definitions, graphicTypes);
 }

package/src/materialization/selection/items/common.js

@@ -6,6 +6,7 @@ import {
 } from "../../../grammar/markSelection.js";
 import { unionConcreteGraphicBounds } from
   "../../../grammar/schemas/graphicBounds.js";
+import { readRectItemGeometry } from "../../../grammar/roundedRect.js";
 
 export function itemKey(layer, grain, index) {
   return `${layer.id}/${grain}/${index}`;
@@ -54,14 +55,15 @@ export function uniqueFields(rows) {
 
 function requireResolvedGraphic(program, layer, type) {
   const graphic = program.graphicSpec.objects[layer.id];
+  const types = Array.isArray(type) ? type : [type];
   const compatibleCollection = graphic?.type === "collection" &&
-    graphic.items?.every(child => child.type === type);
+    graphic.items?.every(child => types.includes(child.type));
   if (
-    (graphic?.type !== type && !compatibleCollection) ||
+    (!types.includes(graphic?.type) && !compatibleCollection) ||
     !Array.isArray(graphic.items)
   ) {
     throw new Error(
-      `Mark "${layer.id}" requires a materialized ${type} collection for selection.`
+      `Mark "${layer.id}" requires a materialized ${types.join("/")} collection for selection.`
     );
   }
   return graphic;
@@ -78,6 +80,13 @@ export function concreteProperties(properties) {
   );
 }
 
+function selectableGraphicProperties(item) {
+  return {
+    ...concreteProperties(item?.properties),
+    ...(readRectItemGeometry(item) ?? {})
+  };
+}
+
 function sharedConcreteProperties(items) {
   if (items.length === 0) return {};
   const shared = concreteProperties(items[0].properties);
@@ -118,7 +127,10 @@ export function finalizeItems(program, layer, grain, definitions, graphicType) {
     const items = indices.map(childIndex => graphic.items[childIndex]);
     const properties = definition.properties ?? (
       items.length === 1
-        ? concreteProperties(items[0].properties)
+        ? selectableGraphicProperties({
+            type: items[0].type ?? graphic.type,
+            properties: items[0].properties
+          })
         : {
             ...sharedConcreteProperties(items),
             ...collectionBounds(program, items)
@@ -131,6 +143,9 @@ export function finalizeItems(program, layer, grain, definitions, graphicType) {
       fields: cloneAndFreeze(definition.fields),
       channels: cloneAndFreeze(definition.channels),
       properties: cloneAndFreeze(properties),
+      ...(definition.geometry === undefined
+        ? {}
+        : { geometry: cloneAndFreeze(definition.geometry) }),
       members: Object.freeze([...definition.members]),
       graphicIds: Object.freeze(items.map((child, childOffset) =>
         child.id ?? graphicId(layer, indices[childOffset])

package/src/materialization/selection/items/rect.js

@@ -1,4 +1,5 @@
 import { rectUsesFields } from "../../../grammar/rects.js";
+import { readRectItemGeometry } from "../../../grammar/roundedRect.js";
 import { resolveRectRows } from "../../rect.js";
 import {
   channelMapFromRow,
@@ -9,6 +10,17 @@ import {
   uniqueFields
 } from "./common.js";
 
+function rectSelectionProperties(graphic, index) {
+  const item = graphic.items[index];
+  return {
+    ...concreteProperties(item?.properties),
+    ...(readRectItemGeometry({
+      type: item?.type ?? graphic.type,
+      properties: item?.properties
+    }) ?? {})
+  };
+}
+
 function resolveGradientPlotItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
   return finalizeItems(
@@ -19,7 +31,7 @@ function resolveGradientPlotItems(program, layer, dataset) {
       key: itemKey(layer, "rect", index),
       fields: ownFields(row),
       channels: channelMapFromRow(row, layer),
-      properties: concreteProperties(graphic.items[index]?.properties),
+      properties: rectSelectionProperties(graphic, index),
       members: [row]
     })),
     "rect"
@@ -28,7 +40,13 @@ function resolveGradientPlotItems(program, layer, dataset) {
 
 export function resolveRectItems(program, layer, dataset) {
   const graphic = program.graphicSpec.objects[layer.id];
-  if (graphic?.type !== "rect" || !Array.isArray(graphic.items)) {
+  const rounded = Object.hasOwn(program.markConfigs[layer.id] ?? {}, "cornerRadius");
+  const compatibleCollection = rounded && graphic?.type === "collection" &&
+    graphic.items?.every(item => ["rect", "path"].includes(item.type));
+  if (
+    (graphic?.type !== "rect" && !compatibleCollection) ||
+    !Array.isArray(graphic.items)
+  ) {
     throw new Error(`Rect mark "${layer.id}" is incomplete for selection.`);
   }
   if (program.markConfigs[layer.id]?.gradientPlot?.materialized === true) {
@@ -40,8 +58,14 @@ export function resolveRectItems(program, layer, dataset) {
     key: itemKey(layer, "rect", item.sourceIndex),
     fields: hasField ? ownFields(item.row) : uniqueFields(dataset.values),
     channels: channelMapFromRow(item.row, layer),
-    properties: concreteProperties(graphic.items[graphicIndex]?.properties),
+    properties: rectSelectionProperties(graphic, graphicIndex),
     members: hasField ? [item.row] : dataset.values
   }));
-  return finalizeItems(program, layer, "rect", definitions, "rect");
+  return finalizeItems(
+    program,
+    layer,
+    "rect",
+    definitions,
+    rounded ? ["rect", "path"] : "rect"
+  );
 }

package/src/materialization/selection/path.js

@@ -10,7 +10,7 @@ function translateCommand(command, offset) {
 }
 
 export function transformPathHighlightProperties(properties, style) {
-  const { offset, ...appearance } = style;
+  const { offset = { x: 0, y: 0 }, ...appearance } = style;
   return {
     ...properties,
     ...appearance,

package/src/materialization/selection/point.js

@@ -1,5 +1,6 @@
 import { createPointShapeGraphic } from "../../grammar/pointShapes.js";
 import { finiteMidpoint } from "../../grammar/numeric.js";
+import { requestedStrokeDetails } from "../../grammar/strokeStyle.js";
 
 function pointCenterAndArea(child) {
   const properties = child.properties;
@@ -75,7 +76,8 @@ export function transformPointHighlightChild(child, style) {
       ? (child.properties.opacity === undefined ? {} : { opacity: child.properties.opacity })
       : { opacity: style.opacity }),
     ...(style.stroke === undefined ? {} : { stroke: style.stroke }),
-    ...(style.strokeWidth === undefined ? {} : { strokeWidth: style.strokeWidth })
+    ...(style.strokeWidth === undefined ? {} : { strokeWidth: style.strokeWidth }),
+    ...requestedStrokeDetails(child.properties, "Point highlight source")
   };
   if (style.shape !== undefined) {
     return createPointShapeGraphic({

package/src/materialization/text.js

@@ -1,11 +1,21 @@
 import { resolveBarChannels } from "../grammar/bars/policy.js";
+import {
+  assertMarkLabelPlacementSupport,
+  normalizeMarkLabelPlacement,
+  resolveMarkLabelPlacement
+} from "../layout/labels.js";
 import { resolveMarkLabelValues } from "../grammar/markLabels.js";
 import { formatTextValue } from "../grammar/text.js";
 import { normalizePositionDatum } from "../grammar/positionDatum.js";
 import { mapOrdinalPositionValues } from "../grammar/scales/index.js";
 import { findDataset } from "../selectors/datasets.js";
+import { findCoordinate } from "../selectors/coordinates.js";
 import { findLayer } from "../selectors/layers.js";
+import { unionConcreteGraphicBounds } from
+  "../grammar/schemas/graphicBounds.js";
+import { polarDirection } from "../grammar/polar.js";
 import { resolveMarkItems } from "./selection/policies/index.js";
+import { resolveMarkSelection } from "./selection/state.js";
 import { mapScaleConsumerValues } from "./scales/map.js";
 import { resolveRowEncodingValues } from "./rowEncoding.js";
 
@@ -83,6 +93,172 @@ function sourceAnchor(program, source, item) {
   return { x: item.properties.x, y: item.properties.y };
 }
 
+function explicitIntervalAxis(source) {
+  const axes = ["x", "y"].filter(axis =>
+    source.encoding?.[axis] !== undefined &&
+    source.encoding?.[`${axis}2`] !== undefined
+  );
+  return axes.length === 1 ? axes[0] : undefined;
+}
+
+function sourcePlacementContext(program, source) {
+  const coordinateType = findCoordinate(program, source.coordinate)?.type;
+  return {
+    markType: source.mark.type,
+    coordinateType,
+    intervalAxis: source.mark.type === "bar"
+      ? resolveBarChannels(source).measure
+      : source.mark.type === "rect"
+        ? explicitIntervalAxis(source)
+        : undefined
+  };
+}
+
+export function validateSourceMarkLabelPlacement(program, sourceId, value) {
+  const source = findLayer(program, sourceId);
+  if (source === undefined) {
+    throw new Error(`Unknown mark label placement source "${sourceId}".`);
+  }
+  const placement = normalizeMarkLabelPlacement(value);
+  assertMarkLabelPlacementSupport(sourcePlacementContext(program, source), placement);
+  return placement;
+}
+
+function rectangleBounds(item) {
+  const { x, y, width, height } = item.properties;
+  if (![x, y, width, height].every(Number.isFinite)) {
+    throw new TypeError("Interval mark label placement requires finite rectangle geometry.");
+  }
+  return {
+    left: Math.min(x, x + width),
+    right: Math.max(x, x + width),
+    top: Math.min(y, y + height),
+    bottom: Math.max(y, y + height)
+  };
+}
+
+function mappedChannel(program, source, item, channel) {
+  const value = item.channels[channel];
+  const primary = channel === "x2" ? "x" : channel === "y2" ? "y" : channel;
+  const scale = program.resolvedScales[
+    source.encoding?.[channel]?.scale ?? source.encoding?.[primary]?.scale
+  ];
+  return value === undefined || scale === undefined
+    ? undefined
+    : mapScaleConsumerValues([value], scale, channel)[0];
+}
+
+function scaleIncreaseDirection(program, source, axis) {
+  const scale = program.resolvedScales[source.encoding?.[axis]?.scale];
+  const domain = scale?.domain;
+  if (!Array.isArray(domain) || domain.length < 2) {
+    return axis === "x" ? { x: 1, y: 0 } : { x: 0, y: -1 };
+  }
+  const mapped = mapScaleConsumerValues(
+    [domain[0], domain.at(-1)],
+    scale,
+    axis
+  );
+  const delta = mapped[1] - mapped[0];
+  if (!Number.isFinite(delta) || delta === 0) {
+    return axis === "x" ? { x: 1, y: 0 } : { x: 0, y: -1 };
+  }
+  return axis === "x"
+    ? { x: Math.sign(delta), y: 0 }
+    : { x: 0, y: Math.sign(delta) };
+}
+
+function intervalPlacementGeometry(program, source, item, axis) {
+  const bounds = rectangleBounds(item);
+  const primary = mappedChannel(program, source, item, axis);
+  const secondary = mappedChannel(program, source, item, `${axis}2`);
+  if (![primary, secondary].every(Number.isFinite)) {
+    throw new TypeError(
+      `${source.mark.type === "bar" ? "Bar" : "Rect"} semantic label placement requires resolved ${axis}/${axis}2 endpoints.`
+    );
+  }
+  const cross = axis === "x"
+    ? (bounds.top + bounds.bottom) / 2
+    : (bounds.left + bounds.right) / 2;
+  const start = axis === "x" ? { x: primary, y: cross } : { x: cross, y: primary };
+  const end = axis === "x" ? { x: secondary, y: cross } : { x: cross, y: secondary };
+  const delta = { x: end.x - start.x, y: end.y - start.y };
+  const length = Math.hypot(delta.x, delta.y);
+  const endOutward = length > 0
+    ? { x: delta.x / length, y: delta.y / length }
+    : scaleIncreaseDirection(program, source, axis);
+  return {
+    kind: "interval",
+    center: {
+      x: (bounds.left + bounds.right) / 2,
+      y: (bounds.top + bounds.bottom) / 2
+    },
+    start: {
+      point: start,
+      outward: { x: -endOutward.x, y: -endOutward.y }
+    },
+    end: { point: end, outward: endOutward },
+    bounds
+  };
+}
+
+function pointPlacementGeometry(program, source, item) {
+  const center = { x: item.properties.x, y: item.properties.y };
+  const coordinateType = findCoordinate(program, source.coordinate)?.type;
+  if (coordinateType !== "polar") return { kind: "point", center };
+  const thetaScale = program.resolvedScales[source.encoding?.theta?.scale];
+  const theta = item.channels.theta === undefined || thetaScale === undefined
+    ? undefined
+    : mapScaleConsumerValues([item.channels.theta], thetaScale, "theta")[0];
+  const outward = Number.isFinite(theta) ? polarDirection(theta) : { x: 0, y: -1 };
+  const objectBounds = unionConcreteGraphicBounds(
+    program.graphicSpec,
+    item.graphicIds
+  );
+  const corners = objectBounds === undefined ? [] : [
+    { x: objectBounds.left, y: objectBounds.top },
+    { x: objectBounds.right, y: objectBounds.top },
+    { x: objectBounds.right, y: objectBounds.bottom },
+    { x: objectBounds.left, y: objectBounds.bottom }
+  ];
+  const support = Math.max(0, ...corners.map(point =>
+    (point.x - center.x) * outward.x + (point.y - center.y) * outward.y
+  ));
+  return {
+    kind: "point",
+    center,
+    end: {
+      point: {
+        x: center.x + outward.x * support,
+        y: center.y + outward.y * support
+      },
+      outward
+    }
+  };
+}
+
+function sourcePlacementGeometry(program, source, item) {
+  if (source.mark.type === "bar") {
+    return intervalPlacementGeometry(
+      program,
+      source,
+      item,
+      resolveBarChannels(source).measure
+    );
+  }
+  if (source.mark.type === "rect") {
+    const axis = explicitIntervalAxis(source);
+    return axis === undefined
+      ? { kind: "point", center: sourceAnchor(program, source, item) }
+      : intervalPlacementGeometry(program, source, item, axis);
+  }
+  if (source.mark.type === "arc") return item.geometry;
+  if (source.mark.type === "point") {
+    return pointPlacementGeometry(program, source, item);
+  }
+  return { kind: "point", center: sourceAnchor(program, source, item) };
+}
+
 function contentValue(encoding, rowOrItem, source) {
   return Object.hasOwn(encoding, "field")
     ? source === undefined
@@ -91,8 +267,7 @@ function contentValue(encoding, rowOrItem, source) {
     : encoding.datum;
 }
 
-function concreteItem(config, position, value, format) {
-  const text = formatTextValue(value, format);
+function concreteTextItem(config, position, text, { offsets = true } = {}) {
   const x = position.x;
   const y = position.y;
   if (text === undefined || !Number.isFinite(x) || !Number.isFinite(y)) {
@@ -101,8 +276,8 @@ function concreteItem(config, position, value, format) {
   return {
     type: "text",
     properties: {
-      x: x + config.dx,
-      y: y + config.dy,
+      x: x + (offsets ? config.dx : 0),
+      y: y + (offsets ? config.dy : 0),
       text,
       fill: config.fill,
       opacity: config.opacity,
@@ -116,6 +291,10 @@ function concreteItem(config, position, value, format) {
   };
 }
 
+function concreteItem(config, position, value, format) {
+  return concreteTextItem(config, position, formatTextValue(value, format));
+}
+
 function relativeLuminance(color) {
   if (typeof color !== "string" || !/^#[0-9a-f]{6}$/i.test(color)) {
     return undefined;
@@ -147,18 +326,90 @@ function resolveSourceTextItems(program, layer, config) {
   if (source === undefined) {
     throw new Error(`Text mark "${layer.id}" requires source layer "${layer.source}".`);
   }
-  const items = resolveMarkItems(program, source.id);
-  const values = layer.encoding.text.content === undefined ? undefined
-    : resolveMarkLabelValues(source, items, layer.encoding.text);
-  return items.flatMap((item, index) => {
-    const anchor = sourceAnchor(program, source, item);
-    const concrete = concreteItem(
-      sourceTextConfig(config, source, item),
-      anchor,
-      values === undefined ? contentValue(layer.encoding.text, item, source) : values[index],
+  const requested = program.markConfigs[layer.id]?.labelAuthoring?.selection ?? {
+    kind: "all"
+  };
+  let allItems;
+  let items;
+  if (requested.kind === "all") {
+    allItems = resolveMarkItems(program, source.id);
+    items = allItems;
+  } else if (requested.kind === "inline") {
+    const resolved = resolveMarkSelection(program, source.id, requested.selector);
+    allItems = resolved.items;
+    const selected = new Set(resolved.keys);
+    items = allItems.filter(item => selected.has(item.key));
+  } else if (requested.kind === "named") {
+    const definition = program.materializationConfigs.selections?.[requested.id];
+    if (definition === undefined) {
+      throw new Error(`Unknown label selection "${requested.id}".`);
+    }
+    if (definition.target !== source.id) {
+      throw new Error(
+        `Label selection "${requested.id}" must target source mark "${source.id}".`
+      );
+    }
+    const resolved = resolveMarkSelection(program, source.id, definition.selector);
+    allItems = resolved.items;
+    const selected = new Set(resolved.keys);
+    items = allItems.filter(item => selected.has(item.key));
+  } else {
+    throw new Error(`Unknown label selection kind "${requested.kind}".`);
+  }
+  const resolvedValues = layer.encoding.text.content === undefined ? undefined
+    : resolveMarkLabelValues(source, allItems, layer.encoding.text);
+  const values = resolvedValues === undefined ? undefined : new Map(
+    allItems.map((item, index) => [item.key, resolvedValues[index]])
+  );
+  return items.flatMap(item => {
+    let resolvedConfig = sourceTextConfig(config, source, item);
+    const text = formatTextValue(
+      values === undefined
+        ? contentValue(layer.encoding.text, item, source)
+        : values.get(item.key),
       layer.encoding.text.format
     );
-    return concrete === undefined ? [] : [{ graphic: concrete, anchor }];
+    if (text === undefined) return [];
+    const placement = program.markConfigs[layer.id]?.labelAuthoring?.placement;
+    if (placement === undefined) {
+      const anchor = sourceAnchor(program, source, item);
+      const concrete = concreteTextItem(resolvedConfig, anchor, text);
+      return concrete === undefined ? [] : [{ graphic: concrete, anchor }];
+    }
+    assertMarkLabelPlacementSupport(sourcePlacementContext(program, source), placement);
+    const resolved = resolveMarkLabelPlacement({
+      placement,
+      geometry: sourcePlacementGeometry(program, source, item),
+      text: {
+        text,
+        fontSize: resolvedConfig.fontSize,
+        fontFamily: resolvedConfig.fontFamily,
+        fontWeight: resolvedConfig.fontWeight,
+        textAlign: resolvedConfig.align,
+        textBaseline: resolvedConfig.baseline,
+        rotation: resolvedConfig.rotation,
+        dx: resolvedConfig.dx,
+        dy: resolvedConfig.dy
+      }
+    });
+    if (!resolved.visible) return [];
+    if (
+      resolved.anchor.startsWith("outside") &&
+      config.fillExplicit !== true
+    ) {
+      resolvedConfig = config;
+    }
+    const anchor = { x: resolved.sourceX, y: resolved.sourceY };
+    return [{
+      graphic: concreteTextItem(
+        resolvedConfig,
+        { x: resolved.x, y: resolved.y },
+        text,
+        { offsets: false }
+      ),
+      anchor,
+      placement: resolved
+    }];
   });
 }
 

package/src/renderers/canvas/circle.js

@@ -1,6 +1,7 @@
 import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
+import { applyCanvasStroke } from "./stroke.js";
 
 function drawCircle(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -43,9 +44,7 @@ function drawCircle(context, child, collectionId) {
         `Graphic "${graphicId}" requires a non-negative strokeWidth.`
       );
     }
-    context.strokeStyle = properties.stroke;
-    context.lineWidth = strokeWidth;
-    context.setLineDash([]);
+    applyCanvasStroke(context, properties);
     context.stroke();
   }
 }

package/src/renderers/canvas/line.js

@@ -1,6 +1,7 @@
 import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
+import { applyCanvasStroke } from "./stroke.js";
 
 function drawLine(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -32,10 +33,8 @@ function drawLine(context, child, collectionId) {
     throw new Error(`Graphic "${graphicId}" requires opacity from 0 to 1.`);
   }
 
-  context.strokeStyle = properties.stroke;
-  context.lineWidth = strokeWidth;
   context.globalAlpha = opacity;
-  context.setLineDash(properties.strokeDash ?? []);
+  applyCanvasStroke(context, properties, properties.strokeDash ?? []);
   context.beginPath();
   context.moveTo(x1, y1);
   context.lineTo(x2, y2);

package/src/renderers/canvas/native.js

@@ -9,10 +9,10 @@ import { validateConcreteGraphicProperties } from
 const MAX_NATIVE_VALUE = 16_777_216;
 const NATIVE_PROPERTIES = {
   canvas: ["x", "y", "width", "height"],
-  circle: ["x", "y", "radius", "strokeWidth"],
-  rect: ["x", "y", "width", "height", "strokeWidth"],
-  line: ["x1", "y1", "x2", "y2", "strokeWidth"],
-  path: ["strokeWidth"],
+  circle: ["x", "y", "radius", "strokeWidth", "miterLimit"],
+  rect: ["x", "y", "width", "height", "strokeWidth", "miterLimit"],
+  line: ["x1", "y1", "x2", "y2", "strokeWidth", "miterLimit"],
+  path: ["strokeWidth", "miterLimit"],
   text: ["x", "y", "fontSize"]
 };
 const COMMAND_PROPERTIES = ["x", "y", "x1", "y1", "x2", "y2"];

package/src/renderers/canvas/path.js

@@ -3,6 +3,7 @@ import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
 import { resolvePathCommandBounds } from "../../grammar/schemas/graphicBounds.js";
 import { applyCanvasFill } from "./fill.js";
+import { applyCanvasStroke } from "./stroke.js";
 
 function drawPath(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -82,9 +83,7 @@ function drawPath(context, child, collectionId) {
     context.fill();
   }
   if (hasStroke) {
-    context.strokeStyle = properties.stroke;
-    context.lineWidth = strokeWidth;
-    context.setLineDash(strokeDash);
+    applyCanvasStroke(context, properties, strokeDash);
     context.stroke();
   }
 }

package/src/renderers/canvas/rect.js

@@ -2,6 +2,7 @@ import { requireFiniteProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
 import { applyCanvasFill } from "./fill.js";
+import { applyCanvasStroke } from "./stroke.js";
 
 function drawRect(context, child, collectionId) {
   const properties = child.properties ?? {};
@@ -42,9 +43,7 @@ function drawRect(context, child, collectionId) {
     bottom: y + height
   }, graphicId);
   context.fillRect(x, y, width, height);
-  context.strokeStyle = properties.stroke;
-  context.lineWidth = strokeWidth;
-  context.setLineDash([]);
+  applyCanvasStroke(context, properties);
   context.beginPath();
   context.moveTo(x, y);
   context.lineTo(x + width, y);

package/src/renderers/canvas/stroke.js

@@ -0,0 +1,11 @@
+import { resolveStrokeDetails } from "../../grammar/strokeStyle.js";
+
+export function applyCanvasStroke(context, properties, strokeDash = []) {
+  const details = resolveStrokeDetails(properties);
+  context.strokeStyle = properties.stroke;
+  context.lineWidth = properties.strokeWidth;
+  context.lineCap = details.lineCap;
+  context.lineJoin = details.lineJoin;
+  context.miterLimit = details.miterLimit;
+  context.setLineDash(strokeDash);
+}