Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

CanvasRenderingContext2D.filter

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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 the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
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
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.filter' in that specification.
Living Standard Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 52.0 49 (49) [1] No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support 49.0 (49) [1] No support No support No support

[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

Document Tags and Contributors

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