CanvasRenderingContext2D.filter

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):

<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

Browser compatibility

[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