This is an experimental technologyCheck 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 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 the image, 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. A value 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, 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.
- See
grayscale()
- A CSS
<percentage>
. Converts the drawing to grayscale. A value of100%
is completely grayscale. A value of0%
leaves the drawing unchanged. hue-rotate()
- A CSS
<angle>
. Applies a hue rotation on the drawing. A value of0deg
leaves the input unchanged. invert()
- A CSS
<percentage>
. Inverts the drawing. A value of100%
means complete inversion. A value of0%
leaves the drawing unchanged. opacity()
- A CSS
<percentage>
. Applies transparency to the drawing. A value 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 the drawing unchanged. sepia()
- A CSS
<percentage>
. Converts the drawing to sepia. A value of100%
means completely sepia. A value of0%
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 rhino.
HTML
<canvas id="canvas" width="400" height="150"></canvas>
<div style="display:none;">
<img id="source"
src="https://mdn.mozillademos.org/files/5397/rhino.jpg">
</div>
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 * .6, image.height * .6);
// Draw image with filter
ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #e81)';
ctx.drawImage(image, 400, 0, -image.width * .6, image.height * .6);
});
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.filter' in that specification. | Living Standard | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 52 |
Edge
Full support 79 |
Firefox Full support 49 Full support 49 No support 35 — 48 Disabled' From version 35 until version 48 (exclusive): this feature is behind the |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
Full support 52 |
Chrome Android
Full support 52 |
Firefox Android Full support 49 Full support 49 No support 35 — 48 Disabled' From version 35 until version 48 (exclusive): this feature is behind the |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- 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
- The interface defining this property:
CanvasRenderingContext2D
- CSS
filter
- CSS
<filter-function>
CanvasRenderingContext2D.filter by Mozilla Contributors is licensed under CC-BY-SA 2.5.