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 such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.

Syntax

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

Values

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

url()
A CSS <url>. Takes an IRI pointing to an SVG filter element, which may be embedded in an external XML file.
blur()
A CSS <length>. Applies a Gaussian blur to the drawing. It defines the value of the standard deviation to the Gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. A value of 0 leaves the input unchanged.
brightness()
A CSS <percentage>. Applies a linear multiplier to the drawing, making it appear brighter or darker. A value under 100% darkens the image, while a value over 100% brightens it. A value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged.
contrast()
A CSS <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()
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()
A CSS <percentage>. Converts the drawing to grayscale. A value of 100% is completely grayscale. A value of 0% leaves the drawing unchanged.
hue-rotate()
A CSS <angle>. Applies a hue rotation on the drawing. A value of 0deg leaves the input unchanged.
invert()
A CSS <percentage>. Inverts the drawing. A value of 100% means complete inversion. A value of 0% leaves the drawing unchanged.
opacity()
A CSS <percentage>. Applies transparency to the drawing. A value of 0% means completely transparent. A value of 100% leaves the drawing unchanged.
saturate()
A CSS <percentage>. Saturates the drawing. A value of 0% means completely un-saturated. A value of 100% leaves the drawing unchanged.
sepia()
A CSS <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

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

Applying a blur

This example blurs a piece of text using the filter property.

HTML

<canvas id="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 the contrast, sepia, and drop-shadow filters to a photo of a gecko.

HTML

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source"
       src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg">
</div>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)';
ctx.drawImage(image, 10, 10, 180, 120);

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 52Edge ? Firefox Full support 49
Full support 49
No support 35 — 48
Disabled
Disabled 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.
IE No support NoOpera No support NoSafari No support NoWebView Android Full support 52Chrome Android Full support 52Edge Mobile ? Firefox Android Full support 49
Full support 49
No support 35 — 48
Disabled
Disabled 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.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Document Tags and Contributors

Last updated by: mfluehr,