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 of100%
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 of0%
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 of0%
leaves the drawing unchanged. opacity(<percentage>)
- Percentage. Applies transparency to the drawing. A value of
0%
means completely transparent. A value of100%
leaves the drawing unchanged. saturate(<percentage>)
- Saturates the drawing. A value of
0%
means completely un-saturated. A value of100%
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):
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.filter = 'blur(5px)'; ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100);</textarea>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var edit = document.getElementById('edit'); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener('click', function() { textarea.value = code; drawCanvas(); }); edit.addEventListener('click', function() { textarea.focus(); }) textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas);
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
- The interface defining it,
CanvasRenderingContext2D
- CSS
filter