Image processing filters on canvas pixels

Filters touch pixels—either CPU readbacks or GPU passes. This sample is a sandbox; production pipelines should prefer compute shaders or WASM for throughput—see post-processing in Lesson 30.

Mind color space (gamma) when chaining filters.

Interactive demo

const node = {
    id: '1',
    type: 'rect',
    fill: 'https://v3b.fal.media/files/b/tiger/v1lf1EcPP1X1pw_YOKM4o.jpg',
    x: 50,
    y: 50,
    width: 200,
    height: 200,
    lockAspectRatio: true,
    filter: 'noise(0.6)',
};