The Upcoming CanvasFilter API

The CanvasFilter API looks like a promising new feature that could enter the arsenal of web developers. The general concept is to improve the existing Canvas 2D API with additional capabilities and optimizations.

What is the CanvasFilter API?

The Canvas Filter API is a new way to filter images using pure JavaScript. This new extension will allow better use of SVG filters within canvas element.

Currently web developers can use the filter URL property of Canvas2D rendering context. However this is not supported in OffscreenCanvas and WebWorkers. Hopefully the new proposal will provide more interesting filters available programmatically directly on canvas.

Example usage

Using this new feature is quite straight forward as it is very close to the existing SVG filters. However, the filter pipeline is in JavaScript and there is no an official documentation at this point.

After reading an image into a Canvas element, we can use the new extension to filter images. The snippet below shows how to implement a simple Gaussian blur in just a few lines of source code:

const context = canvas.getContext("2d");
context.filter = new CanvasFilter({
  filter: "gaussianBlur",
  stdDeviation: 15,
});
context.drawImage(image, 0, 0);

Simple, isn’t it! In addition, it is possible to connect several filters at once. This makes it easy to create graphic effects and enhance web games and apps with less effort.

const context = canvas.getContext("2d");
context.filter = new CanvasFilter([{
    filter: "gaussianBlur",
    stdDeviation: 15,
  },
  {filter:"colorMatrix", values: [
    2, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0,
  ]}
]);
context.drawImage(image, 0, 0);

The above code creates a blurred image with an emphasis on the red color channel (the image below).

Browser coverage

At this point, this new Canvas 2D extension is more of an idea than an out-of-the-box capability. However, it seems that some browsers already provide partial support for it.

For example, recent versions of Google Chrome and Microsoft Edge have support for the new API. For the current implementation status please refer to caniuse.com.

Note: This new API is not official yet, so keep that in mind if you decide to use it in production! You might be better off using WebGL filtering until the official release.

Useful Resources

• The Chrome Platform Status
• The Canvas2D Improvement proposal
• The SVG element on MSDN

Conclusion

This article provides an introduction to a new web technology that we expect to come live soon. SVG filters are a powerful tool to work with and using them via pure JavaScript for image processing is a great convenience. The new Canvas Filter API is already available for some browsers, so we can easily experiment with it. I hope this new feature will make it easier for us to create online apps for photos, games, graphics and so on.

---