TheCanvasRenderingContext2D.filterproperty of the Canvas 2D API provides filter effects such as blurring and grayscaling.It is similar to the CSSfilter property and accepts the same values.

Value

Thefilter property accepts a value of"none" or one or moreof the following filter functions in a string.

url()

A CSSurl(). Takes any URL that resolves to SVG filter element.This can be the ID of an element, a path to external XML file, or even a data encoded SVG value.

blur()

A CSS<length>. Applies a Gaussian blur to the drawing. Itdefines the value of the standard deviation to the Gaussian function, i.e., how manypixels on the screen blend into each other; thus, a larger value will create moreblur. A value of0 leaves the input unchanged.

brightness()

A CSS<percentage>. Applies a linear multiplier to the drawing,making it appear brighter or darker. A value under100% darkens theimage, while a value over100% brightens it. A value of0%will create an image that is completely black, while a value of100%leaves the input unchanged.

contrast()

A CSS<percentage>. Adjusts the contrast of the drawing. Avalue of0% will create a drawing that is completely black. A value of100% leaves the drawing unchanged.

drop-shadow()

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, compositedbelow the drawing. This function takes up to five arguments:

<offset-x>

See<length> for possibleunits. Specifies the horizontal distance of the shadow.

<offset-y>

See<length> for possibleunits. Specifies the vertical distance of the shadow.

<blur-radius>

The larger this value, the bigger the blur, sothe shadow becomes bigger and lighter. Negative values are not allowed.

<color>

See<color> values for possiblekeywords and notations.

grayscale()

A CSS<percentage>. Converts the drawing to grayscale. A valueof100% is completely grayscale. A value of0% leaves thedrawing unchanged.

hue-rotate()

A CSS<angle>. Applies a hue rotation on the drawing. A valueof0deg leaves the input unchanged.

invert()

A CSS<percentage>. Inverts the drawing. A value of100% means complete inversion. A value of0% leaves thedrawing unchanged.

opacity()

A CSS<percentage>. Applies transparency to the drawing. Avalue of0% means completely transparent. A value of100%leaves the drawing unchanged.

saturate()

A CSS<percentage>. Saturates the drawing. A value of0% means completely un-saturated. A value of100% leaves thedrawing unchanged.

sepia()

A CSS<percentage>. Converts the drawing to sepia. A value of100% means completely sepia. A value of0% leaves thedrawing unchanged.

none

No filter is applied. Initial value.

Examples

To view these examples, make sure to use a browser that supports this feature; see thecompatibility table below.

Applying a blur

This example blurs a piece of text using thefilter property.

HTML

<canvas></canvas>

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.filter = "blur(4px)";ctx.font = "48px serif";ctx.fillText("Hello world", 50, 100);

Result

Applying multiple filters

You can combine as many filters as you like. This example applies thecontrast,sepia, anddrop-shadow filters to aphoto of a rhino.

HTML

<canvas width="400" height="150"></canvas><div>  <img       src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" /></div>

.hidden {  display: none;}

JavaScript

const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const image = document.getElementById("source");image.addEventListener("load", (e) => {  // Draw unfiltered image  ctx.drawImage(image, 0, 0, image.width * 0.6, image.height * 0.6);  // Draw image with filter  ctx.filter = "contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #ee8811)";  ctx.drawImage(image, 400, 0, -image.width * 0.6, image.height * 0.6);});

Result

Specifications

Browser compatibility

See also

• The interface defining this property:CanvasRenderingContext2D
• CSSfilter
• CSS<filter-function>