Skip to content
b7ca3bb Dec 3, 2014
@gskinner @lannymcnie
executable file 90 lines (73 sloc) 2.54 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>EaselJS Example: Filters test file.</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
<script src="../lib/easeljs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries. -->
<script id="editable">
var img;
function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "../_assets/art/flowers.jpg";
function handleImageLoad() {
//find canvas and load images, wait for last image to load
var canvas = document.getElementById("testCanvas");
// create a new stage and point it at our canvas:
stage = new createjs.Stage(canvas);
var bmp = new createjs.Bitmap(img).set({scaleX: 0.5, scaleY: 0.5});
var colorMatrix = new createjs.ColorMatrix();
var blackAndWhiteFilter = new createjs.ColorMatrixFilter(colorMatrix);
bmp = bmp.clone();
// filters are only displayed when the display object is cached
// later, you can call updateCache() to update changes to your filters
bmp.filters = [blackAndWhiteFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.x = 480;
var blurFilter = new createjs.BlurFilter(64, 0, 1);
bmp = bmp.clone();
bmp.filters = [blurFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.y = 200;
var removeRedFilter = new createjs.ColorFilter(0.25, 0.75, 1, 1); // red, green, blue, alpha
bmp = bmp.clone();
bmp.filters = [removeRedFilter];
bmp.cache(0, 0, img.width, img.height);
bmp.x = 0;
var frame = new createjs.Shape();"#000")
.moveTo(480, 0).lineTo(480, 400)
.moveTo(0, 200).lineTo(960, 200);
frame.compositeOperation = "destination-out"; // punch the frame out.
// draw to the canvas:
<body onload="init();">
<header class="EaselJS">
<p>Demonstrates using filters. Top-left: original. Top-right: <code>ColorMatrixFilter</code>.
Bottom-left: <code>ColorFilter</code>. Bottom-right:
<canvas id="testCanvas" width="960" height="400"
Something went wrong with that request. Please try again.