Colors, Shapes, And Vectors

Recipe accepts hexadecimal colors, RGB component arrays, percentages, and names registered with chroma(). Shape and line options can set fill, stroke, opacity, transforms, dashes, and line properties.

import { createRecipe } from "@muhammara/wasm";

var Recipe = await createRecipe();
var pdfBytes = new Recipe()
  .createPage(420, 300)
  .chroma("brandBlue", "#0066cc")
  .rectangle(36, 36, 150, 72, {
    fill: "brandBlue",
    stroke: "#0f172a",
    borderRadius: [12, 12, 4, 4],
  })
  .ellipse(280, 72, 62, 36, { fill: [240, 90, 80], opacity: 0.75 })
  .lineStyle({ width: 3, cap: 1, join: 1, dash: [8, 4] })
  .line([
    [36, 154],
    [190, 210],
    [350, 154],
  ])
  .star(210, 238, 36, 5, { fill: "#fbbf24", stroke: "#92400e" })
  .endPage()
  .endPDF();

Use moveTo() and lineTo() for connected paths. Calls without options only append path segments; pass painting options to the final lineTo() to render the path. The compatibility methods fill(), stroke(), and fillAndStroke() do not paint a pending path. Use line() and polygon() for point arrays, and circle(), rectangle(), ellipse(), arc(), pie(), n_gon(), star(), triangle(), and arrow() for common geometry. pie() closes its arc at the center so it can be filled as a wedge.

For circle(), ellipse(), rectangle(), arc(), and pie(), positive requested dimensions that are each at least the line width include the complete stroke: Recipe insets the stroke centerline by half its width so the outer edge stays inside those bounds. The fill still uses the full requested dimensions. Smaller or negative geometry follows native PDF path behavior and is not guaranteed to stay inside the requested bounds. Polygon strokes remain centered on their path.

lineStyle() changes subsequent strokes on the current page. It accepts width (or lineWidth), numeric PDF cap and join values, miterLimit, dash, and dashPhase; omitted values keep their existing setting. lineWidth(width) remains shorthand for lineStyle({ width }).

opacity(value) sets both fill and stroke alpha for subsequent drawing and must be between 0 and 1. Call opacity(1) to restore opaque output. A shape's or text run's opacity option is scoped to that operation, on new and edited pages.

Separation (spot) colors name a printing ink, such as a PANTONE color, with an alternate device color for screens and ordinary printers. Register the ink with the separation colorspace and draw with its name, or pass a device color with colorName to register and use it in one step. Recipe writes each ink's Separation color space once and paints it at full tint:

recipe
  .chroma("PANTONE 1505 C", [255, 105, 0], "separation")
  .rectangle(40, 40, 120, 60, {
    fill: "PANTONE 1505 C",
    colorspace: "separation",
  })
  .text("Spot orange", 40, 120, {
    color: [0, 56, 90, 0],
    colorspace: "separation",
    colorName: "Brand Orange",
  });

A separation color without an ink name, such as "#0000ff", draws in the device color space of its value.

Wasm does not support native Recipe's chroma("!load", path) filesystem loader; register colors individually.

See Create A Pie Chart for a complete chart and the API reference for shape-specific options.