HAKASHUN/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
  <script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
  <script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
  <script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<style id="jsbin-css">
#canvas {
  background: gray;
}
#original {
  width: 100px;
  height: 100px;
  background:#CCC;
  display: block;
}
#original img {
  padding: 20px 18px;
}
</style>
</head>
<body onload=init()>
  <div id="original">
    <img src="http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png">
  </div>
  <canvas id="canvas" width="100" height="100"></canvas>

<script id="jsbin-javascript">
var manifest = [
   {
     src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
     id: "chara"
   }
];

var canvas, images, stage;

/**
 * DOMロード後
 */
function init() {
	canvas = document.getElementById("canvas");
	images = images||{};
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
}

/**
 * 画像ロード完了後
 */
function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

/**
 * すべての画像ロード完了後
 */
function handleComplete() {
  // create stage
  stage = new createjs.Stage(canvas);

  // メインのbitmap
  // charaBitmap
  var charaBitmap = new createjs.Bitmap(images.chara);
  // charaDisplay
  var chara = new createjs.Container();
  chara.addChild(charaBitmap);
  chara.x = 50 - chara.getBounds().width / 2;
  chara.y = 50 - chara.getBounds().height / 2;

  // 上にブレンドさせるbitmap
  // brendCharaBitmap
  var brendCharaBitmap = new createjs.Bitmap(images.chara);
  // brendChara
  var brendChara = new createjs.Container();
  brendChara.addChild(brendCharaBitmap);
  brendChara.x = chara.x;
  brendChara.y = chara.y;

  // compositeOperation指定
  // http://dev.w3.org/fxtf/compositing-1/#propdef-mix
  brendChara.compositeOperation = 'lighter';


  // add canvas to exportRoot
  var exportRoot = new createjs.MovieClip();
  exportRoot.addChild(chara);
  exportRoot.addChild(brendChara);

  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(12);
  createjs.Ticker.addEventListener("tick", stage);
}
</script>


<script id="jsbin-source-css" type="text/css">#canvas {
  background: gray;
}
#original {
  width: 100px;
  height: 100px;
  background:#CCC;
  display: block;
}
#original img {
  padding: 20px 18px;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">var manifest = [
   {
     src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
     id: "chara"
   }
];

var canvas, images, stage;

/**
 * DOMロード後
 */
function init() {
	canvas = document.getElementById("canvas");
	images = images||{};
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
}

/**
 * 画像ロード完了後
 */
function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

/**
 * すべての画像ロード完了後
 */
function handleComplete() {
  // create stage
  stage = new createjs.Stage(canvas);

  // メインのbitmap
  // charaBitmap
  var charaBitmap = new createjs.Bitmap(images.chara);
  // charaDisplay
  var chara = new createjs.Container();
  chara.addChild(charaBitmap);
  chara.x = 50 - chara.getBounds().width / 2;
  chara.y = 50 - chara.getBounds().height / 2;

  // 上にブレンドさせるbitmap
  // brendCharaBitmap
  var brendCharaBitmap = new createjs.Bitmap(images.chara);
  // brendChara
  var brendChara = new createjs.Container();
  brendChara.addChild(brendCharaBitmap);
  brendChara.x = chara.x;
  brendChara.y = chara.y;

  // compositeOperation指定
  // http://dev.w3.org/fxtf/compositing-1/#propdef-mix
  brendChara.compositeOperation = 'lighter';


  // add canvas to exportRoot
  var exportRoot = new createjs.MovieClip();
  exportRoot.addChild(chara);
  exportRoot.addChild(brendChara);

  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(12);
  createjs.Ticker.addEventListener("tick", stage);
}</script></body>
</html>

## jsbin.noqixi.css
#canvas {
  background: gray;
}
#original {
  width: 100px;
  height: 100px;
  background:#CCC;
  display: block;
}
#original img {
  padding: 20px 18px;
}

## jsbin.noqixi.js
var manifest = [
   {
     src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
     id: "chara"
   }
];

var canvas, images, stage;

/**
 * DOMロード後
 */
function init() {
	canvas = document.getElementById("canvas");
	images = images||{};
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
}

/**
 * 画像ロード完了後
 */
function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

/**
 * すべての画像ロード完了後
 */
function handleComplete() {
  // create stage
  stage = new createjs.Stage(canvas);

  // メインのbitmap
  // charaBitmap
  var charaBitmap = new createjs.Bitmap(images.chara);
  // charaDisplay
  var chara = new createjs.Container();
  chara.addChild(charaBitmap);
  chara.x = 50 - chara.getBounds().width / 2;
  chara.y = 50 - chara.getBounds().height / 2;

  // 上にブレンドさせるbitmap
  // brendCharaBitmap
  var brendCharaBitmap = new createjs.Bitmap(images.chara);
  // brendChara
  var brendChara = new createjs.Container();
  brendChara.addChild(brendCharaBitmap);
  brendChara.x = chara.x;
  brendChara.y = chara.y;

  // compositeOperation指定
  // http://dev.w3.org/fxtf/compositing-1/#propdef-mix
  brendChara.compositeOperation = 'lighter';


  // add canvas to exportRoot
  var exportRoot = new createjs.MovieClip();
  exportRoot.addChild(chara);
  exportRoot.addChild(brendChara);

  stage.addChild(exportRoot);
  stage.update();

  createjs.Ticker.setFPS(12);
  createjs.Ticker.addEventListener("tick", stage);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
	<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
	<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
	<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
	<style id="jsbin-css">
	#canvas {
	background: gray;
	}
	#original {
	width: 100px;
	height: 100px;
	background:#CCC;
	display: block;
	}
	#original img {
	padding: 20px 18px;
	}
	</style>
	</head>
	<body onload=init()>
	<div id="original">
	<img src="http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png">
	</div>
	<canvas id="canvas" width="100" height="100"></canvas>

	<script id="jsbin-javascript">
	var manifest = [
	{
	src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
	id: "chara"
	}
	];

	var canvas, images, stage;

	/**
	* DOMロード後
	*/
	function init() {
	canvas = document.getElementById("canvas");
	images = images\|\|{};
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
	}

	/**
	* 画像ロード完了後
	*/
	function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
	}

	/**
	* すべての画像ロード完了後
	*/
	function handleComplete() {
	// create stage
	stage = new createjs.Stage(canvas);

	// メインのbitmap
	// charaBitmap
	var charaBitmap = new createjs.Bitmap(images.chara);
	// charaDisplay
	var chara = new createjs.Container();
	chara.addChild(charaBitmap);
	chara.x = 50 - chara.getBounds().width / 2;
	chara.y = 50 - chara.getBounds().height / 2;

	// 上にブレンドさせるbitmap
	// brendCharaBitmap
	var brendCharaBitmap = new createjs.Bitmap(images.chara);
	// brendChara
	var brendChara = new createjs.Container();
	brendChara.addChild(brendCharaBitmap);
	brendChara.x = chara.x;
	brendChara.y = chara.y;

	// compositeOperation指定
	// http://dev.w3.org/fxtf/compositing-1/#propdef-mix
	brendChara.compositeOperation = 'lighter';


	// add canvas to exportRoot
	var exportRoot = new createjs.MovieClip();
	exportRoot.addChild(chara);
	exportRoot.addChild(brendChara);

	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(12);
	createjs.Ticker.addEventListener("tick", stage);
	}
	</script>


	<script id="jsbin-source-css" type="text/css">#canvas {
	background: gray;
	}
	#original {
	width: 100px;
	height: 100px;
	background:#CCC;
	display: block;
	}
	#original img {
	padding: 20px 18px;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">var manifest = [
	{
	src: 'http://okapie.sakura.ne.jp/toShow/CJ_VersionTest/images/as3_id10_3_1.png',
	id: "chara"
	}
	];

	var canvas, images, stage;

	/**
	* DOMロード後
	*/
	function init() {
	canvas = document.getElementById("canvas");
	images = images\|\|{};
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
	}

	/**
	* 画像ロード完了後
	*/
	function handleFileLoad(evt) {
	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
	}

	/**
	* すべての画像ロード完了後
	*/
	function handleComplete() {
	// create stage
	stage = new createjs.Stage(canvas);

	// メインのbitmap
	// charaBitmap
	var charaBitmap = new createjs.Bitmap(images.chara);
	// charaDisplay
	var chara = new createjs.Container();
	chara.addChild(charaBitmap);
	chara.x = 50 - chara.getBounds().width / 2;
	chara.y = 50 - chara.getBounds().height / 2;

	// 上にブレンドさせるbitmap
	// brendCharaBitmap
	var brendCharaBitmap = new createjs.Bitmap(images.chara);
	// brendChara
	var brendChara = new createjs.Container();
	brendChara.addChild(brendCharaBitmap);
	brendChara.x = chara.x;
	brendChara.y = chara.y;

	// compositeOperation指定
	// http://dev.w3.org/fxtf/compositing-1/#propdef-mix
	brendChara.compositeOperation = 'lighter';


	// add canvas to exportRoot
	var exportRoot = new createjs.MovieClip();
	exportRoot.addChild(chara);
	exportRoot.addChild(brendChara);

	stage.addChild(exportRoot);
	stage.update();

	createjs.Ticker.setFPS(12);
	createjs.Ticker.addEventListener("tick", stage);
	}</script></body>
	</html>