CanvasRenderingContext2D.filter

The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. 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>)

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() (<angle>)

Angle. 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(4px)';
ctx.font = '48px serif';
ctx.fillText('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 compatibilityUpdate compatibility data on GitHub

See also

• The interface defining it, CanvasRenderingContext2D
• CSS filter