Canvas / standalone diagnostic

Canvas validation

Follow one fixture through rendering, readback and export. Compare the evidence with a reference browser.

192 × 96 smoke fixture · system fonts · automatic capture after font readiness · no session saved. This is a development test, not the full production signal. Previews reconstruct captured pixels after sampling; timings exclude presentation.

Preparing canvas validation…

Rendering profile

Copy or download this JSON as the value of the RENDERING_PROFILE environment variable at browser launch. The proposed patches must be implemented first, and the named Windows font files must be installed. These editable defaults are a starting rendering policy, not native settings inferred from this browser’s pixels.

Uses real font outlines, color layers and palettes across all canvases. No hashes, sampled colors, glyph screenshots or test-specific replacements are exported. Native font resolution must reject missing assets.

Rendering target: general font and color-glyph behavior, including known Windows emoji colors and metrics. This fixture’s full-image hashes are optional exact-comparison evidence; they are never runtime replacement keys.

Expected values and query parameters

API controls default to true. Saved policy and expectations come from app/data/tests/canvas.json. Each platform group accepts renderingProfile and expected. An empty group leaves platform hashes and widths unset. Green means a stated check passed; it does not establish Windows parity.

Paste a signature, a full reference-extractor bundle, or a partial object such as {"widths":[120,6,5]}. Apply stores the compact signature in ?expected= as URL-encoded JSON and runs again. Query values override matching saved fields; clearing the editor restores saved expectations. The example is illustrative, not a Windows baseline.

Selects the saved reference group, not the browser’s observed OS. Changing it starts a fresh page capture and clears query overrides. The proposed runtime policy currently targets Windows rendering.

Applied expected signature

{
  "status": "not-applied"
}
Shared fixture and helper code used by the steps
Available after initialization.
  1. 01

    Draw the fixture

    192 × 96, opaque sRGB. System fonts, combining marks, emoji, rotation and multiply circles. Capture pixels and text widths.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 1 JSON

    {
  "status": "pending"
}
  2. 02

    Read the same bitmap again

    No redraw. A second read should return identical bytes.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 2 JSON

    {
  "status": "pending"
}
  3. 03

    Reset and redraw

    Setting dimensions clears the bitmap and context state. Redrawing should reproduce the first sample.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 3 JSON

    {
  "status": "pending"
}
  4. 04

    Draw on a fresh canvas

    A new HTML canvas should produce the same pixels, metrics and context attributes.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 4 JSON

    {
  "status": "pending"
}
  5. 05

    Draw offscreen

    Run the same fixture on the main thread using OffscreenCanvas.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 5 JSON

    {
  "status": "pending"
}
  6. 06

    Draw in a worker

    Serialize the same draw function into a dedicated worker. Compare its offscreen pixels and metrics with the document.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 6 JSON

    {
  "status": "pending"
}
  7. 07

    Export with toBlob

    Decode PNG through ImageDecoder and VideoFrame.copyTo, independently of Canvas 2D readback hooks.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 7 JSON

    {
  "status": "pending"
}
  8. 08

    Export with toDataURL

    Read the generated data URL locally and independently decode the PNG. No upload or external request.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 8 JSON

    {
  "status": "pending"
}
  9. 09

    Export offscreen

    Check OffscreenCanvas.convertToBlob against the first HTML canvas sample.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 9 JSON

    {
  "status": "pending"
}
  10. 10

    Check pixel and rectangle semantics

    A space leaves transparent pixels. Opaque writes survive readback. Negative dimensions normalize; zero width throws IndexSizeError. Preview: the 2 × 2 opaque control, enlarged.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 10 JSON

    {
  "status": "pending"
}
  11. 11

    Read Display P3

    Validate the requested color space and subrectangle values. The preview is converted to sRGB; JSON retains P3 values.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 11 JSON

    {
  "status": "pending"
}
  12. 12

    Read floating-point pixels

    Check Float16Array output and subrectangle consistency. JSON retains native float values; the preview is converted for display.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 12 JSON

    {
  "status": "pending"
}
  13. 13

    Isolate geometry

    Repeat the background and multiply circles without text to separate geometry from font rendering.

    Pending

    Executed JavaScript
    Waiting for execution.

    Step 13 JSON

    {
  "status": "pending"
}

Final signal payload

Pending

Signature, individual checks, expected comparisons and timings. Shiki highlighting runs after measurement and cleanup. The actions below copy or download this exact payload. The top Download payload button also includes full RGBA samples; step JSON shows their hashes.

{
  "status": "pending"
}