CanvasRenderingContext2D.filter

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects like blurring or gray-scaling. It is similar to the CSS filter property and accepts the same functions.

Syntax

ctx.filter = "<filter-function1> [<filter-function2] [<filter-functionN]";
ctx.filter = "none";

Filter functions

The filter property accepts one or more of the following filter functions in a DOMString.

url(<url>)
The url() function takes an IRI pointing to an SVG filter element which may be embedded in an external XML file.
blur(<length>)
CSS length. Applies a Gaussian blur to the drawing.
brightness(<percentage>)
Percentage. Applies a linear multiplier to the drawing, making it appear more or less bright.
contrast(<percentage>)
Percentage. Adjusts the contrast of the drawing. A value of 0% will create a drawing that is completely black. A value of 100% leaves the drawing unchanged.
drop-shadow(<offset-x> <offset-y> <blur-radius> <color>)
Applies a drop shadow effect to the drawing. A drop shadow is effectively a blurred, offset version of the drawing's alpha mask drawn in a particular color, composited below the drawing. This function takes up to five arguments:
  • <offset-x>: See <length> for possible units. Specifies the horizontal distance of the shadow.
  • <offset-y>: See <length> for possible units. Specifies the vertical distance of the shadow.
  • <blur-radius>: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed.
  • <color>: See <color> values for possible keywords and notations.
grayscale(<percentage>)
Percentage. Converts the drawing to a gray-scale picture. A value of 100% is completely gray-scale. A value of 0% leaves the drawing unchanged.
hue-rotate(<degree>)
Degree. Applies a hue rotation on the drawing. A value of 0deg leaves the input unchanged.
invert(<percentage>)
Percentage. Inverts the drawing. A value of 100% means complete inversion. A value of 0% leaves the drawing unchanged.
opacity(<percentage>)
Percentage. Applies transparency to the drawing. A value of 0% means completely transparent. A value of 100% leaves the drawing unchanged.
saturate(<percentage>)
Saturates the drawing. A value of 0% means completely un-saturated. A value of 100% leaves the drawing unchanged.
sepia(<percentage>)
Converts the drawing to sepia. A value of 100% means completely sepia. A value of 0% leaves the drawing unchanged.
none
No filter is applied. Initial value.

Examples

Using the filter property

This is just a simple code snippet using the filter property.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.filter = 'blur(5px)';
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);

Edit the code below and see your changes update live in the canvas (and make sure to use a browser which supports this feature, see the compatibility table):

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.filter' in that specification.
Living Standard Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support52 ?

49

35 — 481

No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support5252 ?

49

35 — 481

No No6.0

1. From version 35 until version 48 (exclusive): this feature is behind the canvas.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

See also

Document Tags and Contributors

 Contributors to this page: fscholz, Kaiido, nmve, jpmedley, Sebastianz, Prinz_Rana, stuart, MarkusStange
 Last updated by: fscholz,