Custom Filters

Create your own filters for the Filter System.

Filter Structure

app.filterSystem.registerFilter('myFilter', {
  name: 'My Filter',
  category: 'custom',

  params: {
    intensity: { type: 'number', default: 1, min: 0, max: 1 }
  },

  apply: function(ctx, canvas, params) {
    // ctx: Canvas 2D context
    // canvas: Canvas element
    // params: Filter parameters

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      // Manipulate pixels
      // data[i] = red
      // data[i+1] = green
      // data[i+2] = blue
      // data[i+3] = alpha
    }

    ctx.putImageData(imageData, 0, 0);
  }
});

Example: Invert Filter

app.filterSystem.registerFilter('invert', {
  name: 'Invert',
  category: 'color',

  params: {
    intensity: { type: 'number', default: 1, min: 0, max: 1 }
  },

  apply: function(ctx, canvas, params) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const intensity = params.intensity;

    for (let i = 0; i < data.length; i += 4) {
      data[i] = data[i] + (255 - 2 * data[i]) * intensity;
      data[i + 1] = data[i + 1] + (255 - 2 * data[i + 1]) * intensity;
      data[i + 2] = data[i + 2] + (255 - 2 * data[i + 2]) * intensity;
    }

    ctx.putImageData(imageData, 0, 0);
  }
});

Using Custom Filters

app.filterSystem.addFilter('myFilter', { intensity: 0.8 });

CSS Filters

For simple filters, use CSS filter property:

app.filterSystem.registerFilter('cssBlur', {
  name: 'CSS Blur',
  type: 'css',  // Use CSS instead of pixel manipulation

  params: {
    radius: { type: 'number', default: 5, min: 0, max: 20 }
  },

  getCSSFilter: function(params) {
    return `blur(${params.radius}px)`;
  }
});

Performance Tips

1. CSS filters are GPU-accelerated (faster)
2. Pixel manipulation is more flexible but slower
3. Consider resolution for pixel operations
4. Cache intermediate results when possible