StageGL Masking

by lannymcnie

HTML

<script src="https://rawgit.com/CreateJS/Combined/master/builds/1.0.0/createjs.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

CSS

body, html {
  margin: 0; padding: 0;
}
canvas {
  
}

JavaScript

var stage = new createjs.StageGL("canvas");
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.on("tick", tick);

// Graphic Sample
var s = new createjs.Shape();
s.graphics.f("red").dc(0,0,100);
s.cache(-100,-100,200,200);
createjs.Tween.get(s, {bounce:true, loop:true})
		.to({x:500}, 2000, createjs.Ease.quadIn);
createjs.Tween.get(s, {bounce:true, loop:true})
		.to({y:500}, 2000, createjs.Ease.bounceOut);
//stage.addChild(s);

// Bitmap Sample
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
img.src = "http://playpen.createjs.com/CORS/awesome.jpg";
img.onload = function(event) {}
var bmp = new createjs.Bitmap(img);
stage.addChild(bmp);

bmp.filters = [new createjs.AlphaMaskFilter(s.cacheCanvas)];

// Handy Tick
function tick(event) {
	bmp.cache(s.x-100,s.y-100,img.naturalWidth,img.naturalHeight);
	stage.update(event);
}