blur

Read as Markdown

import { pibbl, createElement, Circle } from "@pibbl/core";
import { blur } from "@pibbl/core/filters";
const controller = pibbl(
  canvas,
  createElement(Circle, {
    style: {
      cx: 150,
      cy: 100,
      radius: 60,
      fill: "#267d7c",
      filter: [blur({ radius: 8 })],
    },
  }),
);

Use a 300 by 200 canvas. The required radius is a finite nonnegative logical-pixel value; eight gives a soft edge in this example. Zero is valid. Related option type: PibblBlurFilterOptions.

A filter captures the receiving primitive plus descendants as one silhouette. A list runs in forward order; nested boundaries run inside out. Layout, hit testing, focus bounds, and pointer coordinates keep their original geometry. Canvas blur cannot filter an HTML button or HtmlBox subtree. Browser Canvas filter support is required for the native blur executor.

Larger captures and multiple boundaries cost more transient surface work. Start with one bounded region. Compare the unfiltered and filtered circles or edit the existing filter example. Dispose the Pibbl controller when the host is removed.

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.