lukegalea/landing_canvas_mask.html

## landing_canvas_mask.html
<!DOCTYPE html>
<html>
  <head>
    <title>Ashley Madison</title>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="javascripts/libs/easeljs/easeljs-0.5.0.min.js"></script>
    <script type="text/javascript" src="javascripts/libs/easeljs/filters/Filter.js"></script>
    <script type="text/javascript" src="javascripts/libs/easeljs/filters/AlphaMaskFilter.js"></script>
  </head>
  <style>
    body {
      background-color: black;
      margin: 0px;
    }
    .is-hidden { display: none; }
    canvas {
      -webkit-transform: translate3d(0, 0, 0);
    }
  </style>
  <script type="text/javascript">
    var canvas, stage, scaleFactor, circle, img, maskStage;
    var FRAMERATE = 21;
    var IMAGE_WIDTH = 640;
    var CIRCLE_RADIUS = 200;
    var CANVAS_WIDTH = window.innerWidth - 4;
    var CANVAS_HEIGHT = window.innerHeight - 4;

    window.onload = function() {
      canvas = document.getElementById('videoCanvas');

      canvas.setAttribute('width', CANVAS_WIDTH);
      canvas.setAttribute('height', CANVAS_HEIGHT);
      scaleFactor = CANVAS_WIDTH / IMAGE_WIDTH;

      var maskCanvas = document.getElementById('maskCanvas');
      maskCanvas.setAttribute('width', CANVAS_WIDTH);
      maskCanvas.setAttribute('height', CANVAS_HEIGHT);
      maskStage = new createjs.Stage(canvas);
      maskStage.enableMouseOver(0);

      var midX = CANVAS_WIDTH / 2;
      var midY = CANVAS_HEIGHT / 2;

      stage = new createjs.Stage(canvas);
      stage.enableMouseOver(0);

      var g = new createjs.Graphics();
      g.beginRadialGradientFill(
        ["#000", "#000"],
        [0.1, 1],
        50, 50, 0,
        50, 50, 50
      );
      g.drawCircle(50, 50, 50);
      circle = new createjs.Shape(g);
      circle.regX = 25;
      circle.regY = 25;

      circle.x = 235;
      circle.y = 100;
      circle.scaleX = circle.scaleY = 4;

      maskStage.addChild(circle);
      maskStage.update();

      img = new createjs.Bitmap(document.getElementById('shushblack'));
      img.scaleX = img.scaleY = scaleFactor;

      var filter = new createjs.AlphaMaskFilter(maskStage.canvas);
      img.filters = [filter];
      img.cache(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

      stage.addChild(img);

      createjs.Ticker.setFPS(FRAMERATE);
      createjs.Ticker.addListener(window);
      console.log("Stage initialized");
    };

    function tick() {
      circle.scaleX = circle.scaleY = circle.scaleX + 0.1;
      maskStage.update();
      img.updateCache();
      stage.update();
    }
  </script>
  <body>
    <img id="shushblack" class="is-hidden" src="images/shushblack.jpg"/>
    <canvas id="videoCanvas">
    </canvas>
    <canvas class="is-hidden" id="maskCanvas">
    </canvas>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Ashley Madison</title>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=no">
	<script type="text/javascript" src="javascripts/libs/easeljs/easeljs-0.5.0.min.js"></script>
	<script type="text/javascript" src="javascripts/libs/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="javascripts/libs/easeljs/filters/AlphaMaskFilter.js"></script>
	</head>
	<style>
	body {
	background-color: black;
	margin: 0px;
	}
	.is-hidden { display: none; }
	canvas {
	-webkit-transform: translate3d(0, 0, 0);
	}
	</style>
	<script type="text/javascript">
	var canvas, stage, scaleFactor, circle, img, maskStage;
	var FRAMERATE = 21;
	var IMAGE_WIDTH = 640;
	var CIRCLE_RADIUS = 200;
	var CANVAS_WIDTH = window.innerWidth - 4;
	var CANVAS_HEIGHT = window.innerHeight - 4;

	window.onload = function() {
	canvas = document.getElementById('videoCanvas');

	canvas.setAttribute('width', CANVAS_WIDTH);
	canvas.setAttribute('height', CANVAS_HEIGHT);
	scaleFactor = CANVAS_WIDTH / IMAGE_WIDTH;

	var maskCanvas = document.getElementById('maskCanvas');
	maskCanvas.setAttribute('width', CANVAS_WIDTH);
	maskCanvas.setAttribute('height', CANVAS_HEIGHT);
	maskStage = new createjs.Stage(canvas);
	maskStage.enableMouseOver(0);

	var midX = CANVAS_WIDTH / 2;
	var midY = CANVAS_HEIGHT / 2;

	stage = new createjs.Stage(canvas);
	stage.enableMouseOver(0);

	var g = new createjs.Graphics();
	g.beginRadialGradientFill(
	["#000", "#000"],
	[0.1, 1],
	50, 50, 0,
	50, 50, 50
	);
	g.drawCircle(50, 50, 50);
	circle = new createjs.Shape(g);
	circle.regX = 25;
	circle.regY = 25;

	circle.x = 235;
	circle.y = 100;
	circle.scaleX = circle.scaleY = 4;

	maskStage.addChild(circle);
	maskStage.update();

	img = new createjs.Bitmap(document.getElementById('shushblack'));
	img.scaleX = img.scaleY = scaleFactor;

	var filter = new createjs.AlphaMaskFilter(maskStage.canvas);
	img.filters = [filter];
	img.cache(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

	stage.addChild(img);

	createjs.Ticker.setFPS(FRAMERATE);
	createjs.Ticker.addListener(window);
	console.log("Stage initialized");
	};

	function tick() {
	circle.scaleX = circle.scaleY = circle.scaleX + 0.1;
	maskStage.update();
	img.updateCache();
	stage.update();
	}
	</script>
	<body>
	<img id="shushblack" class="is-hidden" src="images/shushblack.jpg"/>
	<canvas id="videoCanvas">
	</canvas>
	<canvas class="is-hidden" id="maskCanvas">
	</canvas>
	</body>
	</html>