CanvasRenderingContext2D.filter

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

Browser compatibility

[1] The filter property was deactivated by default in versions 35-48. Set the flag canvas.filters.enabled to true in these versions.
Starting with Gecko 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38), the initial value is none, see (bug 1163124).

See also

• The interface defining it, CanvasRenderingContext2D
• CSS filter