requirebin sketch

index.js

var e2d = require('e2d');

var r = e2d.Renderer.create(800, 600);
var cookie = new e2d.Img();

var cookieShape;
cookie.src = 'http://piecrust.org/wp-content/uploads/2016/03/Cookie1.gif';
cookie.on('load', function() { 
  cookieShape = e2d.createRegularPolygon(cookie.width / 2, [0, 0], 100);
  console.log(cookieShape);
  return r.ready(); 
});

var factor = 1;
var frame = 0;
var rotationFrame = 0;
r.on('frame', function() {
  var hovering = r.mouseData.activeRegions.indexOf('cookie') !== -1;
  var clicked = r.mouseData.clicked;
  r.style({ 
    cursor: hovering ? 'pointer' : 'default'
  });
  if (hovering) {
    frame += frame === 10 ? 0 : frame < 10 ? 1 : -1;
  } else {
  	frame -= 1;
  }
  if (frame < 0) {
    frame = 0; 
  }
  if (clicked && hovering) {
  	frame = 20;
  }
  
  rotationFrame += 1;
  rotationFrame = rotationFrame % 360;
	return r.render(
  	e2d.clearRect(800, 600),
    e2d.translate(400, 300,
      e2d.scale(0.8 + frame * 0.01,
        e2d.rotate(rotationFrame * Math.PI * 2 / 360,
          e2d.path(cookieShape.map(e2d.moveToLineTo)), e2d.fill(),
          e2d.hitRegion('cookie', cookieShape),      
          e2d.translate(-cookie.width/2, -cookie.height/2,
            e2d.fillImage(cookie)
          )
        )
      )
    )
  );
}); 

minified.js

setTimeout(function(){require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({e2d:[function(require,module,exports){(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==="object"&&typeof module==="object")module.exports=factory();else if(typeof define==="function"&&define.amd)define([],factory);else if(typeof exports==="object")exports["e2d"]=factory();else root["e2d"]=factory()})(this,function(){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)}([function(module,exports,__webpack_require__){"use strict";var src=__webpack_require__(1),path=__webpack_require__(11);module.exports=src.keys().reduce(function(index,key){index[path.basename(key,path.extname(key))]=src(key);return index},{})},function(module,exports,__webpack_require__){var map={"./Canvas.js":2,"./Img.js":10,"./Instruction.js":13,"./Renderer.js":3,"./addColorStop.js":14,"./arc.js":15,"./arcTo.js":16,"./beginPath.js":17,"./bezierCurveTo.js":18,"./clearRect.js":19,"./clip.js":20,"./clipPath.js":21,"./closePath.js":22,"./createClass.js":23,"./createImagePattern.js":24,"./createLinearGradient.js":4,"./createRadialGradient.js":5,"./createRegularPolygon.js":25,"./drawCanvas.js":26,"./drawImage.js":27,"./ellipse.js":28,"./fill.js":29,"./fillArc.js":30,"./fillCanvas.js":31,"./fillImage.js":32,"./fillImagePattern.js":33,"./fillRect.js":34,"./fillStyle.js":35,"./fillText.js":36,"./globalAlpha.js":37,"./globalCompositeOperation.js":38,"./hitRect.js":39,"./hitRegion.js":40,"./imageSmoothingEnabled.js":41,"./lineStyle.js":42,"./lineTo.js":43,"./measureText.js":44,"./moveTo.js":45,"./moveToLineTo.js":46,"./path.js":47,"./placeHolder.js":48,"./quadraticCurveTo.js":49,"./rect.js":50,"./resetTransform.js":51,"./rotate.js":53,"./scale.js":54,"./setTransform.js":52,"./shadowStyle.js":55,"./skewX.js":56,"./skewY.js":57,"./stroke.js":58,"./strokeArc.js":59,"./strokeRect.js":60,"./strokeStyle.js":61,"./strokeText.js":62,"./text.js":63,"./textStyle.js":64,"./transform.js":65,"./transformPoints.js":8,"./translate.js":66};function webpackContext(req){return __webpack_require__(webpackContextResolve(req))}function webpackContextResolve(req){return map[req]||function(){throw new Error("Cannot find module '"+req+"'.")}()}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)};webpackContext.resolve=webpackContextResolve;module.exports=webpackContext;webpackContext.id=1},function(module,exports,__webpack_require__){"use strict";function Canvas(width,height){var Renderer=__webpack_require__(3);this.renderer=new Renderer(width,height,window.document.createElement("div"));this.fillPattern=null;this.skipPatternCreation=false;return Object.seal(this)}Canvas.prototype.render=function render(children){var result=[],i;for(i=0;i<arguments.length;i++){result.push(arguments[i])}this.renderer.render(result);if(!this.skipPatternCreation){this.fillPattern=this.renderer.ctx.createPattern(this.renderer.canvas,"no-repeat")}return this};Canvas.prototype.style=function style(){var defs=[];for(var i=0;i<arguments.length;i++){defs.push(arguments[i])}this.renderer.style.apply(this.renderer,defs);return this};Canvas.prototype.toImage=function toImage(imageID){return this.renderer.toImage()};Canvas.prototype.resize=function resize(width,height){this.renderer.resize(+width,+height);return this};Object.defineProperty(Canvas.prototype,"height",{get:function(){return this.renderer.canvas.width},enumerable:true,configurable:false});Object.defineProperty(Canvas.prototype,"width",{get:function(){return this.renderer.canvas.width},enumerable:true,configurable:false});Canvas.create=function create(width,height,id){return new Canvas(width,height,id)};Object.seal(Canvas);Object.seal(Canvas.prototype);module.exports=Canvas},function(module,exports,__webpack_require__){"use strict";var createLinearGradient=__webpack_require__(4),createRadialGradient=__webpack_require__(5),events=__webpack_require__(6),keycode=__webpack_require__(7),transformPoints=__webpack_require__(8),pointInPolygon=__webpack_require__(9),identity=[1,0,0,1,0,0],Img=__webpack_require__(10);function Renderer(width,height,parent,opts){events.EventEmitter.call(this);opts=opts||{};this.transformStack=new Float64Array(((opts.transformStackCount||500)+1)*6);this.transformStackIndex=6;this.transformStack.set(identity);this.fillStyleStack=[];this.strokeStyleStack=[];this.lineStyleStack=[];this.textStyleStack=[];this.shadowStyleStack=[];this.globalAlphaStack=[];this.imageSmoothingEnabledStack=[];this.globalCompositeOperationStack=[];this.pi2=Math.PI*2;this.isReady=false;this.mouseData={x:0,y:0,state:"up",clicked:0,activeRegions:[]};this.previousMouseData={x:0,y:0,state:"up",clicked:0,activeRegions:[]};this.lastMouseEvent=null;this.ranMouseEvent=false;this.mouseRegions=[];this.activeRegions=[];this.styleQueue=[];this.keyData={};this.touchData={touches:[],ids:[]};this.lastTouchEvent=null;this.ranTouchEvent=false;this.touchRegions=[];if(parent&&parent.nodeType===1){this.parent=parent}else{this.parent=window.document.createElement("div");this.parent.style.margin="0 auto";this.parent.style.width=width+"px";this.parent.style.height=height+"px";window.document.body.appendChild(this.parent)}if(!width||width<=0){width=window.innerWidth}if(!height||height<=0){height=window.innerHeight}this.canvas=window.document.createElement("canvas");this.canvas.tabIndex=1;this.ctx=this.canvas.getContext("2d");this.canvas.width=width;this.canvas.height=height;this.parent.appendChild(this.canvas);this.hookMouseEvents();this.hookKeyboardEvents();this.hookTouchEvents();this.boundHookRenderFunction=this.hookRender.bind(this);return Object.seal(this)}Renderer.prototype=Object.create(events.EventEmitter.prototype);Renderer.prototype.render=function render(args){var i,len,child,props,type,cache,matrix=[1,0,0,1,0,0],ctx=this.ctx,children=[],concat=children.concat;this.fillStyleStack.splice(0,this.fillStyleStack.length);this.strokeStyleStack.splice(0,this.strokeStyleStack.length);this.lineStyleStack.splice(0,this.lineStyleStack.length);this.textStyleStack.splice(0,this.textStyleStack.length);this.shadowStyleStack.splice(0,this.shadowStyleStack.length);this.globalCompositeOperationStack.splice(0,this.globalCompositeOperationStack.length);this.globalAlphaStack.splice(0,this.globalAlphaStack.length);this.imageSmoothingEnabledStack.splice(0,this.imageSmoothingEnabledStack.length);for(i=0,len=arguments.length;i<len;i++){children.push(arguments[i])}for(i=0,len=children.length;i<len;i++){child=children[i];if(child&&child.constructor===Array){children=concat.apply([],children);child=children[i];while(child&&child.constructor===Array){children=concat.apply([],children);child=children[i]}len=children.length}if(!child){continue}props=child.props;type=child.type;if(type==="transform"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0]*props[0]+matrix[2]*props[1];this.transformStack[this.transformStackIndex-5]=matrix[1]*props[0]+matrix[3]*props[1];this.transformStack[this.transformStackIndex-4]=matrix[0]*props[2]+matrix[2]*props[3];this.transformStack[this.transformStackIndex-3]=matrix[1]*props[2]+matrix[3]*props[3];this.transformStack[this.transformStackIndex-2]=matrix[0]*props[4]+matrix[2]*props[5]+matrix[4];this.transformStack[this.transformStackIndex-1]=matrix[1]*props[4]+matrix[3]*props[5]+matrix[5];ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="setTransform"){this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=props[0];this.transformStack[this.transformStackIndex-5]=props[1];this.transformStack[this.transformStackIndex-4]=props[2];this.transformStack[this.transformStackIndex-3]=props[3];this.transformStack[this.transformStackIndex-2]=props[4];this.transformStack[this.transformStackIndex-1]=props[5];ctx.setTransform(props[0],props[1],props[2],props[3],props[4],props[5]);continue}if(type==="scale"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0]*props.x;this.transformStack[this.transformStackIndex-5]=matrix[1]*props.x;this.transformStack[this.transformStackIndex-4]=matrix[2]*props.y;this.transformStack[this.transformStackIndex-3]=matrix[3]*props.y;this.transformStack[this.transformStackIndex-2]=matrix[4];this.transformStack[this.transformStackIndex-1]=matrix[5];ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="translate"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0];this.transformStack[this.transformStackIndex-5]=matrix[1];this.transformStack[this.transformStackIndex-4]=matrix[2];this.transformStack[this.transformStackIndex-3]=matrix[3];this.transformStack[this.transformStackIndex-2]=matrix[4]+matrix[0]*props.x+matrix[2]*props.y;this.transformStack[this.transformStackIndex-1]=matrix[5]+matrix[1]*props.x+matrix[3]*props.y;ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="rotate"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0]*props.cos+matrix[2]*props.sin;this.transformStack[this.transformStackIndex-5]=matrix[1]*props.cos+matrix[3]*props.sin;this.transformStack[this.transformStackIndex-4]=matrix[0]*-props.sin+matrix[2]*props.cos;this.transformStack[this.transformStackIndex-3]=matrix[1]*-props.sin+matrix[3]*props.cos;this.transformStack[this.transformStackIndex-2]=matrix[4];this.transformStack[this.transformStackIndex-1]=matrix[5];ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="skewX"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0];this.transformStack[this.transformStackIndex-5]=matrix[1];this.transformStack[this.transformStackIndex-4]=matrix[0]*props.x+matrix[2];this.transformStack[this.transformStackIndex-3]=matrix[1]*props.x+matrix[3];this.transformStack[this.transformStackIndex-2]=matrix[4];this.transformStack[this.transformStackIndex-1]=matrix[5];ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="skewY"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];this.transformStackIndex+=6;if(this.transformStackIndex>this.transformStack.length){this.increaseTransformStackSize()}this.transformStack[this.transformStackIndex-6]=matrix[0]*1+matrix[2]*props.y;this.transformStack[this.transformStackIndex-5]=matrix[1]*1+matrix[3]*props.y;this.transformStack[this.transformStackIndex-4]=matrix[2];this.transformStack[this.transformStackIndex-3]=matrix[3];this.transformStack[this.transformStackIndex-2]=matrix[4];this.transformStack[this.transformStackIndex-1]=matrix[5];ctx.setTransform(this.transformStack[this.transformStackIndex-6],this.transformStack[this.transformStackIndex-5],this.transformStack[this.transformStackIndex-4],this.transformStack[this.transformStackIndex-3],this.transformStack[this.transformStackIndex-2],this.transformStack[this.transformStackIndex-1]);continue}if(type==="restore"){this.transformStackIndex-=6;matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];ctx.setTransform(matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]);continue}if(type==="fillRect"){ctx.fillRect(props.x,props.y,props.width,props.height);continue}if(type==="strokeRect"){ctx.strokeRect(props.x,props.y,props.width,props.height);continue}if(type==="clearRect"){ctx.clearRect(props.x,props.y,props.width,props.height);continue}if(type==="rect"){ctx.rect(props.x,props.y,props.width,props.height);continue}if(type==="fillStyle"){this.fillStyleStack.push(ctx.fillStyle);ctx.fillStyle=props.value;continue}if(type==="strokeStyle"){this.strokeStyleStack.push(ctx.strokeStyle);ctx.strokeStyle=props.value;continue}if(type==="endFillStyle"){ctx.fillStyle=this.fillStyleStack.pop();continue}if(type==="endStrokeStyle"){ctx.strokeStyle=this.strokeStyleStack.pop();continue}if(type==="lineStyle"){this.lineStyleStack.push({lineWidth:ctx.lineWidth,lineCap:ctx.lineCap,lineJoin:ctx.lineJoin,miterLimit:ctx.miterLimit,lineDash:ctx.getLineDash(),lineDashOffset:ctx.lineDashOffset});if(props.lineWidth!==null){ctx.lineWidth=props.lineWidth}if(props.lineCap!==null){ctx.lineCap=props.lineCap}if(props.lineJoin!==null){ctx.lineJoin=props.lineJoin}if(props.miterLimit!==null){ctx.miterLimit=props.miterLimit}if(props.lineDash.length>0){ctx.setLineDash(props.lineDash)}if(props.lineDashOffset!==null){ctx.lineDashOffset=props.lineDashOffset}continue}if(type==="endLineStyle"){cache=this.lineStyleStack.pop();ctx.lineWidth=cache.lineWidth;ctx.lineCap=cache.lineCap;ctx.lineJoin=cache.lineJoin;ctx.miterLimit=cache.miterLimit;ctx.setLineDash(cache.lineDash);ctx.lineDashOffset=cache.lineDashOffset;continue}if(type==="textStyle"){this.textStyleStack.push({font:ctx.font,textAlign:ctx.textAlign,textBaseline:ctx.textBaseline,direction:ctx.direction});if(props.font!==null){ctx.font=props.font}if(props.textAlign!==null){ctx.textAlign=props.textAlign}if(props.textBaseline!==null){ctx.textBaseline=props.textBaseline}if(props.lineJoin!==null){ctx.direction=props.direction}continue}if(type==="endTextStyle"){cache=this.textStyleStack.pop();ctx.font=cache.font;ctx.textAlign=cache.textAlign;ctx.textBaseline=cache.textBaseline;ctx.direction=cache.direction;continue}if(type==="shadowStyle"){this.shadowStyleStack.push({shadowBlur:ctx.shadowBlur,shadowColor:ctx.shadowColor,shadowOffsetX:ctx.shadowOffsetX,shadowOffsetY:ctx.shadowOffsetY});if(props.shadowBlur!==null){ctx.shadowBlur=props.shadowBlur}if(props.shadowColor!==null){ctx.shadowColor=props.shadowColor}if(props.shadowOffsetX!==null){ctx.shadowOffsetX=props.shadowOffsetX}if(props.shadowOffsetY!==null){ctx.shadowOffsetY=props.shadowOffsetY}continue}if(type==="endShadowStyle"){cache=this.shadowStyleStack.pop();ctx.shadowBlur=cache.shadowBlur;ctx.shadowColor=cache.shadowColor;ctx.shadowOffsetX=cache.shadowOffsetX;ctx.shadowOffsetY=cache.shadowOffsetY;continue}if(type==="strokeText"){if(props.maxWidth){ctx.strokeText(props.text,props.x,props.y,props.maxWidth);continue}ctx.strokeText(props.text,props.x,props.y);continue}if(type==="fillText"){if(props.maxWidth){ctx.fillText(props.text,props.x,props.y,props.maxWidth);continue}ctx.fillText(props.text,props.x,props.y);continue}if(type==="text"){if(props.maxWidth!==0){if(props.fill){ctx.fillText(props.text,props.x,props.y,props.maxWidth)}if(props.stroke){ctx.strokeText(props.text,props.x,props.y,props.maxWidth)}continue}if(props.fill){ctx.fillText(props.text,props.x,props.y)}if(props.stroke){ctx.strokeText(props.text,props.x,props.y)}continue}if(type==="drawImage"){if(!props.img){continue}cache=props.img.imageElement||props.img||new Image;ctx.drawImage(cache||new Image,props.dx,props.dy);continue}if(type==="drawImageSize"){if(!props.img){continue}cache=props.img.imageElement||props.img||new Image;ctx.drawImage(cache,props.dx,props.dy,props.dWidth,props.dHeight);continue}if(type==="drawImageSource"){if(!props.img){continue}cache=props.img.imageElement||props.img||new Image;ctx.drawImage(cache,props.sx,props.sy,props.sWidth,props.sHeight,props.dx,props.dy,props.dWidth,props.dHeight);continue}if(type==="fillImagePattern"){if(!props.img){continue}ctx.fillStyle=props.img.imagePatternRepeat;ctx.translate(props.dx,props.dy);ctx.fillRect(0,0,props.dWidth,props.dHeight);ctx.restore();continue}if(type==="fillImage"){if(!props.img){continue}cache=props.img.imageElement;ctx.save();ctx.fillStyle=props.img.imagePattern;ctx.translate(props.dx,props.dy);ctx.fillRect(0,0,cache.width,cache.height);ctx.restore();continue}if(type==="fillImageSize"){if(!props.img){continue}cache=props.img.imageElement;ctx.save();ctx.fillStyle=props.img.imagePattern;ctx.translate(props.dx,props.dy);ctx.scale(props.dWidth/cache.width,props.dHeight/cache.height);ctx.fillRect(0,0,cache.width,cache.height);ctx.restore();continue}if(type==="fillImageSource"){if(!props.img){continue}ctx.save();ctx.fillStyle=props.img.imagePattern;ctx.translate(props.dx,props.dy);ctx.scale(props.dWidth/props.sWidth,props.dHeight/props.sHeight);ctx.translate(-props.sx,-props.sy);ctx.fillRect(props.sx,props.sy,props.sWidth,props.sHeight);ctx.restore();continue}if(type==="fillCanvas"){if(!props.img){continue}cache=props.img;ctx.save();ctx.fillStyle=cache.fillPattern;ctx.translate(props.dx,props.dy);ctx.fillRect(0,0,cache.width,cache.height);ctx.restore();continue}if(type==="fillCanvasSize"){if(!props.img){continue}cache=props.img;ctx.save();ctx.fillStyle=cache.fillPattern;ctx.translate(props.dx,props.dy);ctx.scale(props.dWidth/cache.width,props.dHeight/cache.height);ctx.fillRect(0,0,cache.width,cache.height);ctx.restore();continue}if(type==="fillCanvasSource"){if(!props.img){continue}ctx.save();ctx.fillStyle=props.img.fillPattern;ctx.translate(props.dx,props.dy);ctx.scale(props.dWidth/props.sWidth,props.dHeight/props.sHeight);ctx.translate(-props.sx,-props.sy);ctx.fillRect(props.sx,props.sy,props.sWidth,props.sHeight);ctx.restore();continue}if(type==="drawCanvas"){if(!props.img){continue}ctx.drawImage(props.img.renderer.canvas,props.dx,props.dy);continue}if(type==="drawCanvasSize"){if(!props.img){continue}ctx.drawImage(props.img.renderer.canvas,props.dx,props.dy,props.dWidth,props.dHeight);continue}if(type==="drawCanvasSource"){if(!props.img){continue}ctx.drawImage(props.img.renderer.canvas,props.sx,props.sy,props.sWidth,props.sHeight,props.dx,props.dy,props.dWidth,props.dHeight);continue}if(type==="strokeArc"){ctx.beginPath();ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle);ctx.closePath();ctx.stroke();continue}if(type==="strokeArc-counterclockwise"){ctx.beginPath();ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle,true);ctx.closePath();ctx.stroke();continue}if(type==="fillArc"){ctx.beginPath();ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle);ctx.closePath();ctx.fill();continue}if(type==="fillArc-counterclockwise"){ctx.beginPath();ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle,true);ctx.closePath();ctx.fill();continue}if(type==="moveTo"){ctx.moveTo(props.x,props.y);continue}if(type==="lineTo"){ctx.lineTo(props.x,props.y);continue}if(type==="bezierCurveTo"){ctx.bezierCurveTo(props.cp1x,props.cp1y,props.cp2x,props.cp2y,props.x,props.y);continue}if(type==="quadraticCurveTo"){ctx.quadraticCurveTo(props.cpx,props.cpy,props.x,props.y);continue}if(type==="anticlockwise-arc"){ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle,true);continue}if(type==="arc"){ctx.arc(props.x,props.y,props.r,props.startAngle,props.endAngle);continue}if(type==="full-arc"){ctx.arc(props.x,props.y,props.r,0,this.pi2);continue}if(type==="quick-arc"){ctx.arc(0,0,props.r,0,this.pi2);continue}if(type==="arcTo"){ctx.arcTo(props.x1,props.y1,props.x2,props.y2,props.r);continue}if(type==="anticlockwise-ellipse"){this.save();this.translate(props.x,props.y);this.rotate(props.rotation);this.scale(props.radiusX,props.radiusY);this.arc(0,0,1,props.startAngle,props.endAngle,true);this.restore();continue}if(type==="ellipse"){this.save();this.translate(props.x,props.y);this.rotate(props.rotation);this.scale(props.radiusX,props.radiusY);this.arc(0,0,1,props.startAngle,props.endAngle);this.restore();continue}if(type==="full-ellipse"){this.save();this.translate(props.x,props.y);this.rotate(props.rotation);this.scale(props.radiusX,props.radiusY);this.arc(0,0,1,0,this.pi2);this.restore();continue}if(type==="quick-ellipse"){this.save();this.translate(props.x,props.y);this.scale(props.radiusX,props.radiusY);this.arc(0,0,1,0,this.pi2);this.restore();continue}if(type==="globalCompositeOperation"){this.globalCompositeOperationStack.push(ctx.globalCompositeOperation);ctx.globalCompositeOperation=props.value;continue}if(type==="endGlobalCompositeOperation"){ctx.globalCompositeOperation=this.globalCompositeOperationStack.pop();continue}if(type==="fill"){ctx.fill();continue}if(type==="stroke"){ctx.stroke();continue}if(type==="beginClip"){ctx.save();ctx.beginPath();continue}if(type==="clip"){ctx.clip();continue}if(type==="endClip"){ctx.restore();continue}if(type==="beginPath"){ctx.beginPath();continue}if(type==="closePath"){ctx.closePath();continue}if(type==="globalAlpha"){this.globalAlphaStack.push(ctx.globalAlpha);ctx.globalAlpha*=props.value;continue}if(type==="endGlobalAlpha"){ctx.globalAlpha=this.globalAlphaStack.pop();continue}if(type==="hitRegion"){matrix[0]=this.transformStack[this.transformStackIndex-6];matrix[1]=this.transformStack[this.transformStackIndex-5];matrix[2]=this.transformStack[this.transformStackIndex-4];matrix[3]=this.transformStack[this.transformStackIndex-3];matrix[4]=this.transformStack[this.transformStackIndex-2];matrix[5]=this.transformStack[this.transformStackIndex-1];cache={id:props.id,points:transformPoints(props.points,matrix)};this.mouseRegions.push(cache);this.touchRegions.push(cache);continue}if(type==="imageSmoothingEnabled"){this.imageSmoothingEnabledStack.push(ctx.imageSmoothingEnabled);ctx.imageSmoothingEnabled=props.value;continue}if(type==="endImageSmoothingEnabled"){ctx.imageSmoothingEnabled=this.imageSmoothingEnabledStack.pop();continue}}return this.applyStyles()};Renderer.create=function create(width,height,parent,worker){if(arguments.length>2){return new Renderer(width,height,parent,worker)}if(arguments.length===2){return new Renderer(width,height)}return new Renderer};Renderer.prototype.resize=function(width,height){if(this.canvas.width.toString()!==width.toString()){this.canvas.width=width;if(this.parent!==document.body){this.parent.style.width=width+"px"}}if(this.canvas.height.toString()!==height.toString()){this.canvas.height=height;if(this.parent!==document.body){this.parent.style.height=height+"px"}}};Renderer.prototype.toImage=function toImage(){var Img=__webpack_require__(10);var img=new Img;img.src=this.canvas.toDataURL("image/png");return img};Renderer.prototype.hookRender=function hookRender(){if(this.isReady){this.fireFrame()}return window.requestAnimationFrame(this.boundHookRenderFunction)};Renderer.prototype.cleanupMouseEvents=function cleanupMouseEvents(){this.previousMouseData.x=this.mouseData.x;this.previousMouseData.y=this.mouseData.y;this.previousMouseData.state=this.mouseData.state;this.previousMouseData.clicked=this.mouseData.clicked;this.previousMouseData.activeRegions=this.mouseData.activeRegions.splice(0,this.mouseData.activeRegions.length);this.mouseData.clicked=0;this.ranMouseEvent=false};Renderer.prototype.cleanupTouchEvents=function cleanupTouchEvents(){for(var i=0;i<this.touchData.touches.length;i++){var touch=this.touchData.touches[i];if(!touch.held){this.touchData.touches.splice(i,1);i-=1;continue}touch.previousX=touch.x;touch.previousY=touch.y;touch.touched=false;touch.activeRegions.splice(0,touch.activeRegions.length)}};Renderer.prototype.hookMouseEvents=function hookMouseEvents(){window.document.addEventListener("mousemove",this.mouseMove.bind(this));window.document.addEventListener("mousedown",this.mouseDown.bind(this));return window.document.addEventListener("mouseup",this.mouseUp.bind(this))};Renderer.prototype.hookTouchEvents=function hookTouchEvents(){var listener=this.touchEvent.bind(this);return["touchstart","touchmove","touchend","touchcancel"].forEach(function(evt){return window.document.addEventListener(evt,listener)})};Renderer.prototype.touchEvent=function touchEvent(evt){var rect=this.canvas.getBoundingClientRect(),mousePoint=[0,0],region,i,j;var type=evt.type,touches=evt.changedTouches,touchPoint,touch;for(i=0;i<touches.length;i++){touch=touches.item(i);if(type==="touchstart"){this.touchData.touches.push(touchPoint={x:0,y:0,activeRegions:[],id:touch.identifier,touched:true,moved:false,held:true})}if(type==="touchend"||type==="touchcancel"){for(j=0;j<this.touchData.length;j++){touchPoint=this.touchData.touches[j];if(touchPoint.id===touch.identifier){touchPoint.activeRegions.splice(0,touchPoint.activeRegions.length);touchPoint.held=false;break}}}if(type==="touchmove"){for(j=0;j<this.touchData.length;j++){touchPoint=this.touchData.touches[j];if(touchPoint.id===touch.identifier){touchPoint.moved=true;break}}}mousePoint[0]=touchPoint.x=touch.clientX-rect.left;mousePoint[1]=touchPoint.y=touch.clientY-rect.top;for(j=0;j<this.touchRegions.length;j++){region=this.touchRegions[j];if(pointInPolygon(mousePoint,region.points)){touchPoint.activeRegions.push(region.id)}}}this.lastTouchEvent=evt;this.ranTouchEvent=true;evt.preventDefault();this.emit("touch",this.touchData);return false};Renderer.prototype.mouseMove=function mouseMove(evt){var rect=this.canvas.getBoundingClientRect(),mousePoint=[0,0],region;this.lastMouseEvent=evt;this.ranMouseEvent=true;mousePoint[0]=evt.clientX-rect.left;mousePoint[1]=evt.clientY-rect.top;for(var i=0;i<this.mouseRegions.length;i++){region=this.mouseRegions[i];if(pointInPolygon(mousePoint,region.points)){this.mouseData.activeRegions.push(region.id);this.mouseRegions.splice(this.mouseRegions.indexOf(region),1);i-=1}}this.mouseData.x=mousePoint[0];this.mouseData.y=mousePoint[1];this.emit("mouse",this.mouseData);evt.preventDefault();return false};Renderer.prototype.mouseDown=function mouseMove(evt){if(evt.target===this.canvas){if(this.mouseData.state==="up"){this.mouseData.clicked+=1}this.mouseData.state="down";this.canvas.focus();return this.mouseMove(evt)}};Renderer.prototype.mouseUp=function mouseMove(evt){this.mouseData.state="up";return this.mouseMove(evt)};Renderer.prototype.hookKeyboardEvents=function hookKeyboardEvents(){for(var name in keycode.code){if(keycode.code.hasOwnProperty(name)){this.keyData[name]="up"}}this.canvas.addEventListener("keydown",this.keyDown.bind(this));return window.document.addEventListener("keyup",this.keyUp.bind(this))};Renderer.prototype.keyChange=function keyChange(evt){this.emit("key",this.keyData);evt.preventDefault();return false};Renderer.prototype.keyDown=function keyDown(evt){this.keyData[keycode(evt.keyCode)]="down";return this.keyChange(evt)};Renderer.prototype.keyUp=function keyUp(evt){this.keyData[keycode(evt.keyCode)]="up";return this.keyChange(evt)};Renderer.prototype.fireFrame=function(){if(this.lastMouseEvent&&!this.ranMouseEvent){this.mouseMove(this.lastMouseEvent)}if(this.lastTouchEvent&&!this.ranTouchEvent){this.touchEvent(this.lastMouseEvent)}this.mouseRegions.splice(0,this.mouseRegions.length);this.touchRegions.splice(0,this.touchRegions.length);this.emit("frame",{});this.activeRegions.splice(0,this.activeRegions.length);this.cleanupMouseEvents();this.cleanupTouchEvents();return this};Renderer.prototype.style=function style(){var children=[],styles=[],concat=children.concat,len,i,child,name;for(i=0,len=arguments.length;i<len;i++){children.push(arguments[i])}for(i=0,len=children.length;i<len;i++){child=children[i];if(child&&child.constructor===Array){children=concat.apply([],children);child=children[i];while(child&&child.constructor===Array){children=concat.apply([],children);child=children[i]}len=children.length}if(child){styles.push(child)}}for(i=0;i<styles.length;i++){this.styleQueue.push(styles[i])}return this};Renderer.prototype.applyStyles=function applyStyles(){var styleVal,value;for(var i=0;i<this.styleQueue.length;i++){styleVal=this.styleQueue[i];for(var name in styleVal){if(styleVal.hasOwnProperty(name)){
this.canvas.style[name]=styleVal[name]}}}this.styleQueue.splice(0,this.styleQueue.length);return this};Renderer.prototype.ready=function ready(){this.isReady=true;this.fireFrame();return window.requestAnimationFrame(this.hookRender.bind(this))};Renderer.prototype.measureText=function measureText(font,text){var oldFont=this.ctx.font,result;this.ctx.font=font;result=this.ctx.measureText(text);this.ctx.font=oldFont;return result};Renderer.prototype.increaseTransformStackSize=function increaseTransformStackSize(){var cache=this.transformStack;this.transformStack=new Float64Array(this.transformStack.length+600);this.transformStack.set(cache);return this};Object.defineProperty(Renderer.prototype,"height",{get:function(){return this.canvas.width},enumerable:true,configurable:false});Object.defineProperty(Renderer.prototype,"width",{get:function(){return this.canvas.width},enumerable:true,configurable:false});Object.seal(Renderer);Object.seal(Renderer.prototype);module.exports=Renderer},function(module,exports){"use strict";if(typeof window!=="undefined"){var ctx=window.document.createElement("canvas").getContext("2d")}var concat=[].concat;function createLinearGradient(x0,y0,x1,y1){var grd=ctx.createLinearGradient(x0,y0,x1,y1),children=[];for(var i=0;i<arguments.length;i++){children.push(arguments[i])}for(i=0;i<children.length;i++){while(children[i]&&children[i].constructor===Array){children=concat.apply([],children)}var colorStop=children[i];if(colorStop&&colorStop.type==="addColorStop"){grd.addColorStop(colorStop.props.offset,colorStop.props.color)}}return grd}module.exports=createLinearGradient},function(module,exports){"use strict";if(typeof window!=="undefined"){var ctx=window.document.createElement("canvas").getContext("2d"),concat=[].concat}function createRadialGradient(x0,y0,r0,x1,y1,r1){var grd=ctx.createRadialGradient(x0,y0,r0,x1,y1,r1),children=[];for(var i=0;i<arguments.length;i++){children.push(arguments[i])}for(i=0;i<children.length;i++){while(children[i]&&children[i].constructor===Array){children=concat.apply([],children)}var colorStop=children[i];if(colorStop&&colorStop.type==="addColorStop"){grd.addColorStop(colorStop.props.offset,colorStop.props.color)}}return grd}module.exports=createRadialGradient},function(module,exports){function EventEmitter(){this._events=this._events||{};this._maxListeners=this._maxListeners||undefined}module.exports=EventEmitter;EventEmitter.EventEmitter=EventEmitter;EventEmitter.prototype._events=undefined;EventEmitter.prototype._maxListeners=undefined;EventEmitter.defaultMaxListeners=10;EventEmitter.prototype.setMaxListeners=function(n){if(!isNumber(n)||n<0||isNaN(n))throw TypeError("n must be a positive number");this._maxListeners=n;return this};EventEmitter.prototype.emit=function(type){var er,handler,len,args,i,listeners;if(!this._events)this._events={};if(type==="error"){if(!this._events.error||isObject(this._events.error)&&!this._events.error.length){er=arguments[1];if(er instanceof Error){throw er}throw TypeError('Uncaught, unspecified "error" event.')}}handler=this._events[type];if(isUndefined(handler))return false;if(isFunction(handler)){switch(arguments.length){case 1:handler.call(this);break;case 2:handler.call(this,arguments[1]);break;case 3:handler.call(this,arguments[1],arguments[2]);break;default:args=Array.prototype.slice.call(arguments,1);handler.apply(this,args)}}else if(isObject(handler)){args=Array.prototype.slice.call(arguments,1);listeners=handler.slice();len=listeners.length;for(i=0;i<len;i++)listeners[i].apply(this,args)}return true};EventEmitter.prototype.addListener=function(type,listener){var m;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events)this._events={};if(this._events.newListener)this.emit("newListener",type,isFunction(listener.listener)?listener.listener:listener);if(!this._events[type])this._events[type]=listener;else if(isObject(this._events[type]))this._events[type].push(listener);else this._events[type]=[this._events[type],listener];if(isObject(this._events[type])&&!this._events[type].warned){if(!isUndefined(this._maxListeners)){m=this._maxListeners}else{m=EventEmitter.defaultMaxListeners}if(m&&m>0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-- >0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else if(listeners){while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.prototype.listenerCount=function(type){if(this._events){var evlistener=this._events[type];if(isFunction(evlistener))return 1;else if(evlistener)return evlistener.length}return 0};EventEmitter.listenerCount=function(emitter,type){return emitter.listenerCount(type)};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},function(module,exports){exports=module.exports=function(searchInput){if(searchInput&&"object"===typeof searchInput){var hasKeyCode=searchInput.which||searchInput.keyCode||searchInput.charCode;if(hasKeyCode)searchInput=hasKeyCode}if("number"===typeof searchInput)return names[searchInput];var search=String(searchInput);var foundNamedKey=codes[search.toLowerCase()];if(foundNamedKey)return foundNamedKey;var foundNamedKey=aliases[search.toLowerCase()];if(foundNamedKey)return foundNamedKey;if(search.length===1)return search.charCodeAt(0);return undefined};var codes=exports.code=exports.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,"delete":46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222};var aliases=exports.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,"break":19,caps:20,"return":13,escape:27,spc:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(i=97;i<123;i++)codes[String.fromCharCode(i)]=i-32;for(var i=48;i<58;i++)codes[i-48]=i;for(i=1;i<13;i++)codes["f"+i]=i+111;for(i=0;i<10;i++)codes["numpad "+i]=i+96;var names=exports.names=exports.title={};for(i in codes)names[codes[i]]=i;for(var alias in aliases){codes[alias]=aliases[alias]}},function(module,exports){"use strict";function transformPoints(points,matrix){var result=[],len=points.length,point;for(var i=0;i<len;i++){point=points[i];result.push([matrix[0]*point[0]+matrix[2]*point[1]+matrix[4],matrix[1]*point[0]+matrix[3]*point[1]+matrix[5]])}return result}module.exports=transformPoints},function(module,exports){module.exports=function(point,vs){var x=point[0],y=point[1];var inside=false;for(var i=0,j=vs.length-1;i<vs.length;j=i++){var xi=vs[i][0],yi=vs[i][1];var xj=vs[j][0],yj=vs[j][1];var intersect=yi>y!=yj>y&&x<(xj-xi)*(y-yi)/(yj-yi)+xi;if(intersect)inside=!inside}return inside}},function(module,exports,__webpack_require__){"use strict";var path=__webpack_require__(11),events=__webpack_require__(6);function Img(){events.EventEmitter.call(this);this.imageElement=null;this.imagePattern=null;this.imagePatternRepeat=null;return Object.seal(this)}Img.prototype=Object.create(events.EventEmitter.prototype);Object.defineProperty(Img.prototype,"src",{set:function(val){var element=new Image;this.imageElement=element;element.src=val;if(element.complete){setTimeout(this.imageLoad.bind(this),0)}else{element.onload=this.imageLoad.bind(this)}},get:function(){return this.imageElement.src}});Img.prototype.imageLoad=function imageLoad(){var ctx=window.document.createElement("canvas").getContext("2d");this.imagePattern=ctx.createPattern(this.imageElement,"no-repeat");this.imagePatternRepeat=ctx.createPattern(this.imageElement,"repeat");return this.emit("load",this)};Object.defineProperty(Img.prototype,"width",{enumerable:true,get:function(){return this.imageElement.width},set:function(value){this.imageElement.width=value}});Object.defineProperty(Img.prototype,"height",{enumerable:true,get:function(){return this.imageElement.height},set:function(value){this.imageElement.height=value}});Object.seal(Img);Object.seal(Img.prototype);module.exports=Img},function(module,exports,__webpack_require__){(function(process){function normalizeArray(parts,allowAboveRoot){var up=0;for(var i=parts.length-1;i>=0;i--){var last=parts[i];if(last==="."){parts.splice(i,1)}else if(last===".."){parts.splice(i,1);up++}else if(up){parts.splice(i,1);up--}}if(allowAboveRoot){for(;up--;up){parts.unshift("..")}}return parts}var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;var splitPath=function(filename){return splitPathRe.exec(filename).slice(1)};exports.resolve=function(){var resolvedPath="",resolvedAbsolute=false;for(var i=arguments.length-1;i>=-1&&!resolvedAbsolute;i--){var path=i>=0?arguments[i]:process.cwd();if(typeof path!=="string"){throw new TypeError("Arguments to path.resolve must be strings")}else if(!path){continue}resolvedPath=path+"/"+resolvedPath;resolvedAbsolute=path.charAt(0)==="/"}resolvedPath=normalizeArray(filter(resolvedPath.split("/"),function(p){return!!p}),!resolvedAbsolute).join("/");return(resolvedAbsolute?"/":"")+resolvedPath||"."};exports.normalize=function(path){var isAbsolute=exports.isAbsolute(path),trailingSlash=substr(path,-1)==="/";path=normalizeArray(filter(path.split("/"),function(p){return!!p}),!isAbsolute).join("/");if(!path&&!isAbsolute){path="."}if(path&&trailingSlash){path+="/"}return(isAbsolute?"/":"")+path};exports.isAbsolute=function(path){return path.charAt(0)==="/"};exports.join=function(){var paths=Array.prototype.slice.call(arguments,0);return exports.normalize(filter(paths,function(p,index){if(typeof p!=="string"){throw new TypeError("Arguments to path.join must be strings")}return p}).join("/"))};exports.relative=function(from,to){from=exports.resolve(from).substr(1);to=exports.resolve(to).substr(1);function trim(arr){var start=0;for(;start<arr.length;start++){if(arr[start]!=="")break}var end=arr.length-1;for(;end>=0;end--){if(arr[end]!=="")break}if(start>end)return[];return arr.slice(start,end-start+1)}var fromParts=trim(from.split("/"));var toParts=trim(to.split("/"));var length=Math.min(fromParts.length,toParts.length);var samePartsLength=length;for(var i=0;i<length;i++){if(fromParts[i]!==toParts[i]){samePartsLength=i;break}}var outputParts=[];for(var i=samePartsLength;i<fromParts.length;i++){outputParts.push("..")}outputParts=outputParts.concat(toParts.slice(samePartsLength));return outputParts.join("/")};exports.sep="/";exports.delimiter=":";exports.dirname=function(path){var result=splitPath(path),root=result[0],dir=result[1];if(!root&&!dir){return"."}if(dir){dir=dir.substr(0,dir.length-1)}return root+dir};exports.basename=function(path,ext){var f=splitPath(path)[2];if(ext&&f.substr(-1*ext.length)===ext){f=f.substr(0,f.length-ext.length)}return f};exports.extname=function(path){return splitPath(path)[3]};function filter(xs,f){if(xs.filter)return xs.filter(f);var res=[];for(var i=0;i<xs.length;i++){if(f(xs[i],i,xs))res.push(xs[i])}return res}var substr="ab".substr(-1)==="b"?function(str,start,len){return str.substr(start,len)}:function(str,start,len){if(start<0)start=str.length+start;return str.substr(start,len)}}).call(exports,__webpack_require__(12))},function(module,exports){var process=module.exports={};var cachedSetTimeout;var cachedClearTimeout;(function(){try{cachedSetTimeout=setTimeout}catch(e){cachedSetTimeout=function(){throw new Error("setTimeout is not defined")}}try{cachedClearTimeout=clearTimeout}catch(e){cachedClearTimeout=function(){throw new Error("clearTimeout is not defined")}}})();var queue=[];var draining=false;var currentQueue;var queueIndex=-1;function cleanUpNextTick(){if(!draining||!currentQueue){return}draining=false;if(currentQueue.length){queue=currentQueue.concat(queue)}else{queueIndex=-1}if(queue.length){drainQueue()}}function drainQueue(){if(draining){return}var timeout=cachedSetTimeout(cleanUpNextTick);draining=true;var len=queue.length;while(len){currentQueue=queue;queue=[];while(++queueIndex<len){if(currentQueue){currentQueue[queueIndex].run()}}queueIndex=-1;len=queue.length}currentQueue=null;draining=false;cachedClearTimeout(timeout)}process.nextTick=function(fun){var args=new Array(arguments.length-1);if(arguments.length>1){for(var i=1;i<arguments.length;i++){args[i-1]=arguments[i]}}queue.push(new Item(fun,args));if(queue.length===1&&!draining){cachedSetTimeout(drainQueue,0)}};function Item(fun,array){this.fun=fun;this.array=array}Item.prototype.run=function(){this.fun.apply(null,this.array)};process.title="browser";process.browser=true;process.env={};process.argv=[];process.version="";process.versions={};function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")};process.umask=function(){return 0}},function(module,exports){"use strict";function Instruction(type,props){this.type=type;this.props=props;return Object.seal(this)}Object.seal(Instruction);Object.seal(Instruction.prototype);module.exports=Instruction},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function addColorStop(offset,color){return new Instruction("addColorStop",{offset:offset,color:color})}module.exports=addColorStop},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function arc(x,y,r,startAngle,endAngle,anticlockwise){if(arguments.length>5){return new Instruction(anticlockwise?"anticlockwise-arc":"arc",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length===5){return new Instruction("arc",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>=3){return new Instruction("full-arc",{x:x,y:y,r:r})}if(arguments.length>=1){return new Instruction("quick-arc",{r:x})}return new Instruction("quick-arc",{r:1})}module.exports=arc},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function arcTo(x1,y1,x2,y2,r){return new Instruction("arcTo",{x1:x1,y1:y1,x2:x2,y2:y2,r:r})}module.exports=arcTo},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function beginPath(){return new Instruction("beginPath")}module.exports=beginPath},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y){return new Instruction("bezierCurveTo",{cp1x:cp1x,cp1y:cp1y,cp2x:cp2x,cp2y:cp2y,x:x,y:y})}module.exports=bezierCurveTo},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function clearRect(x,y,width,height){if(arguments.length>2){return new Instruction("clearRect",{x:x,y:y,width:width,height:height})}else{return new Instruction("clearRect",{x:0,y:0,width:x,height:y})}}module.exports=clearRect},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function clip(path,children){var result=[new Instruction("beginClip"),path,new Instruction("clip")];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("endClip"));return result}module.exports=clip},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function clipPath(){return new Instruction("clipPath")}module.exports=clipPath},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function closePath(){return new Instruction("closePath")}module.exports=closePath},function(module,exports){"use strict";var concat=[].concat;function createClass(){var args=[],i;for(i=0;i<arguments.length;i++){args.push(arguments[i])}for(i=0;i<args.length;i++){while(args[i]&&args[i].constructor===Array){args=concat.apply([],args)}if(args[i]&&args[i].type==="placeholder"){break}}return function(){var start=args,end=start.splice(i+1,args.length);start.pop();return function createdClass(){var children=[],i;for(i=0;i<arguments.length;i++){children.push(arguments[i])}return[start,children,end]}}()}module.exports=createClass},function(module,exports,__webpack_require__){"use strict";if(typeof window!=="undefined"){var ctx=document.createElement("canvas").getContext("2d"),Img=__webpack_require__(10)}function createImagePattern(img,type){if(img){return ctx.createImagePattern(img.constructor===Img?img.imageElement:img,type)}return null}module.exports=createImagePattern},function(module,exports){"use strict";function createRegularPolygon(radius,position,sides){radius=+radius||1;position[0]=+position[0]||0;position[1]=+position[1]||0;sides=+sides||3;var polygon=[];for(var i=0;i<sides;i++){polygon.push([position[0]+radius*Math.cos(Math.PI*2*i/sides),position[1]+radius*Math.sin(Math.PI*2*i/sides)])}return polygon}module.exports=createRegularPolygon},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function drawCanvas(canvas,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight){if(arguments.length===9){return new Instruction("drawCanvasSource",{img:canvas,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight,dx:dx,dy:dy,dWidth:dWidth,dHeight:dHeight})}if(arguments.length>=5){return new Instruction("drawCanvasSize",{img:canvas,dx:sx,dy:sy,dWidth:sWidth,dHeight:sHeight})}if(arguments.length>=3){return new Instruction("drawCanvas",{img:canvas,dx:sx,dy:sy})}return new Instruction("drawCanvas",{img:canvas,dx:0,dy:0})}module.exports=drawCanvas},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function drawImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight){if(arguments.length===9){return new Instruction("drawImageSource",{img:img,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight,dx:dx,dy:dy,dWidth:dWidth,dHeight:dHeight})}if(arguments.length>=5){return new Instruction("drawImageSize",{img:img,dx:sx,dy:sy,dWidth:sWidth,dHeight:sHeight})}if(arguments.length>=3){return new Instruction("drawImage",{img:img,dx:sx,dy:sy})}return new Instruction("drawImage",{img:img,dx:0,dy:0})}module.exports=drawImage},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,anticlockwise){if(arguments.length>7){return new Instruction(anticlockwise?"anticlockwise-ellipse":"ellipse",{x:x,y:y,radiusX:radiusX,radiusY:radiusY,startAngle:startAngle,endAngle:endAngle})}if(arguments.length===7){return new Instruction("ellipse",{x:x,y:y,radiusX:radiusX,radiusY:radiusY,rotation:rotation,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>=5){return new Instruction("full-ellipse",{x:x,y:y,radiusX:radiusX,radiusY:radiusY,rotation:rotation})}if(arguments.length===4){return new Instruction("quick-ellipse",{x:x,y:y,radiusX:radiusX,radiusY:radiusY})}return new Instruction("quick-ellipse",{x:0,y:0,radiusX:x,radiusY:y})}module.exports=ellipse},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fill(){return new Instruction("fill")}module.exports=fill},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13),pi2=Math.PI*2;function fillArc(x,y,r,startAngle,endAngle,counterclockwise){if(arguments.length>=6&&counterclockwise){return new Instruction("fillArc-counterclockwise",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>3){return new Instruction("fillArc",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>1){return new Instruction("fillArc",{x:x,y:y,r:r,startAngle:0,endAngle:pi2})}return new Instruction("fillArc",{x:0,y:0,r:x,startAngle:0,endAngle:pi2})}module.exports=fillArc},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight){if(arguments.length===9){return new Instruction("fillCanvasSource",{img:img,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight,dx:dx,dy:dy,dWidth:dWidth,dHeight:dHeight})}if(arguments.length>=5){return new Instruction("fillCanvasSize",{img:img,dx:sx,dy:sy,dWidth:sWidth,dHeight:sHeight})}if(arguments.length>=3){return new Instruction("fillCanvas",{img:img,dx:sx,dy:sy})}return new Instruction("fillCanvas",{img:img,dx:0,dy:0})}module.exports=fillImage},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillImage(img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight){if(arguments.length===9){return new Instruction("fillImageSource",{img:img,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight,dx:dx,dy:dy,dWidth:dWidth,dHeight:dHeight})}if(arguments.length>=5){return new Instruction("fillImageSize",{img:img,dx:sx,dy:sy,dWidth:sWidth,dHeight:sHeight})}if(arguments.length>=3){return new Instruction("fillImage",{img:img,dx:sx,dy:sy})}return new Instruction("fillImage",{img:img,dx:0,dy:0})}module.exports=fillImage},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillImagePattern(img,dx,dy,dWidth,dHeight){if(arguments.length>=5){return new Instruction("fillImagePattern",{img:img,dx:dx,dy:dy,dWidth:dWidth,dHeight:dHeight})}if(arguments.length>=3){return new Instruction("fillImagePattern",{img:img,dx:0,dy:0,dWidth:dx,dHeight:dy})}return new Instruction("fillImagePattern",{img:img,dx:0,dy:0,dWidth:0,dHeight:0})}module.exports=fillImagePattern},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillRect(x,y,width,height){if(arguments.length>=4){return new Instruction("fillRect",{x:x,y:y,width:width,height:height})}else{return new Instruction("fillRect",{x:0,y:0,width:x,height:y})}}module.exports=fillRect},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillStyle(value,children){var result=[new Instruction("fillStyle",{value:value})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("endFillStyle"));return result}module.exports=fillStyle},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);module.exports=function fillText(text,x,y,maxWidth){if(arguments.length<4){maxWidth=null}if(arguments.length<3){x=0;y=0}return new Instruction("fillText",{text:text,x:x,y:y,maxWidth:maxWidth})}},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function globalAlpha(alpha,children){var result=[new Instruction("globalAlpha",{value:alpha})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("endGlobalAlpha"));return result}module.exports=globalAlpha},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function globalCompositeOperation(operationType,children){var result=[new Instruction("globalCompositeOperation",{value:operationType})];if(arguments.length===0){return[]}for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("endGlobalCompositeOperation"));return result}module.exports=globalCompositeOperation},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13),hitRegion=__webpack_require__(40);function hitRect(id,x,y,width,height){if(arguments.length<=3){width=x;height=y;x=0;y=0}var points=[[x,y],[x,y+height],[x+width,y+height],[x+width,y]];return hitRegion(id,points)}module.exports=hitRect},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function hitRegion(id,points){return new Instruction("hitRegion",{id:id,points:points})}module.exports=hitRegion},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);module.exports=function imageSmoothingEnabled(val,children){children=[];for(var i=1;i<arguments.length;i++){children.push(arguments[i])}return[new Instruction("imageSmoothingEnabled",{value:Boolean(val)})].concat(children).concat(new Instruction("endImageSmoothingEnabled"))}},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function lineStyle(value,children){value=value||{};var result={lineWidth:null,lineCap:null,lineJoin:null,miterLimit:null,lineDash:[],lineDashOffset:null};if(typeof value.lineWidth!=="undefined"){result.lineWidth=value.lineWidth}if(typeof value.lineCap!=="undefined"){result.lineCap=value.lineCap}if(typeof value.lineJoin!=="undefined"){result.lineJoin=value.lineJoin}if(typeof value.miterLimit!=="undefined"){result.miterLimit=value.miterLimit}if(typeof value.lineDash!=="undefined"){result.lineDash=value.lineDash}if(typeof value.lineDashOffset!=="undefined"){result.lineDashOffset=value.lineDashOffset}var tree=[new Instruction("lineStyle",result)];for(var i=1;i<arguments.length;i++){tree.push(arguments[i])}tree.push(new Instruction("endLineStyle"));return tree}module.exports=lineStyle},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function lineTo(x,y){if(arguments.length===0){return new Instruction("lineTo",{x:0,y:0})}return new Instruction("lineTo",{x:x,y:y})}module.exports=lineTo},function(module,exports){"use strict";if(typeof window!=="undefined"){var ctx=document.createElement("canvas").getContext("2d")}function measureText(text,font){ctx.font=font;return ctx.measureText(text)}module.exports=measureText},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function moveTo(x,y){if(arguments.length===0){return new Instruction("moveTo",{x:0,y:0})}return new Instruction("moveTo",{x:x,y:y})}module.exports=moveTo},function(module,exports,__webpack_require__){"use strict";var moveTo=__webpack_require__(45),lineTo=__webpack_require__(43);function moveToLineTo(point,index){return index===0?moveTo(point[0],point[1]):lineTo(point[0],point[1])}module.exports=moveToLineTo},function(module,exports,__webpack_require__){"use strict";var beginPath=__webpack_require__(17),closePath=__webpack_require__(22);function path(children){var result=[beginPath()];for(var i=0;i<arguments.length;i++){result.push(arguments[i])}result.push(closePath());return result}module.exports=path},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);module.exports=function placeHolder(){return new Instruction("placeholder")}},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function quadraticCurveTo(cpx,cpy,x,y){return new Instruction("quadraticCurveTo",{cpx:cpx,cpy:cpy,x:x,y:y})}module.exports=quadraticCurveTo},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function rect(x,y,width,height){if(arguments.length>2){return new Instruction("rect",{x:x,y:y,width:width,height:height})}else{return new Instruction("rect",{x:0,y:0,width:x,height:y})}}module.exports=rect},function(module,exports,__webpack_require__){"use strict";var setTransform=__webpack_require__(52);module.exports=function resetTransform(){var args=[];for(var i=0;i<arguments.length;i++){args.push(arguments[i])}return setTransform([1,0,0,1,0,0],args)}},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);module.exports=function(matrix,children){var result=[new Instruction("setTransform",[matrix[0],matrix[1],matrix[2],matrix[3],matrix[4],matrix[5]])];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function rotate(r,children){r=+r;var result=[new Instruction("rotate",{cos:Math.cos(r),sin:Math.sin(r)})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}module.exports=rotate},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function scale(x,y,children){var i=2;if(typeof y!=="number"){y=x;i=1}children=children||[];var result=[new Instruction("scale",{x:x,y:y})],child;for(;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}module.exports=scale},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function shadowStyle(value,children){value=value||{};var result={shadowBlur:null,shadowColor:null,shadowOffsetX:null,shadowOffsetY:null};if(typeof value.shadowBlur!=="undefined"){result.shadowBlur=value.shadowBlur}if(typeof value.shadowColor!=="undefined"){result.shadowColor=value.shadowColor}if(typeof value.shadowOffsetX!=="undefined"){result.shadowOffsetX=value.shadowOffsetX}if(typeof value.direction!=="undefined"){result.shadowOffsetY=value.shadowOffsetY}var tree=[new Instruction("shadowStyle",value)];for(var i=1;i<arguments.length;i++){tree.push(arguments[i])}tree.push(new Instruction("endShadowStyle"));return tree}module.exports=shadowStyle},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function skewX(x,children){var result=[new Instruction("skewX",{x:Math.tan(x)})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}module.exports=skewX},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);
function skewY(y,children){var result=[new Instruction("skewY",{y:Math.tan(y)})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}module.exports=skewY},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function stroke(){return new Instruction("stroke")}module.exports=stroke},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13),pi2=Math.PI*2;function strokeArc(x,y,r,startAngle,endAngle,counterclockwise){if(arguments.length>=6&&counterclockwise){return new Instruction("strokeArc-counterclockwise",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>3){return new Instruction("strokeArc",{x:x,y:y,r:r,startAngle:startAngle,endAngle:endAngle})}if(arguments.length>1){return new Instruction("strokeArc",{x:x,y:y,r:r,startAngle:0,endAngle:pi2})}return new Instruction("strokeArc",{x:0,y:0,r:x,startAngle:0,endAngle:pi2})}module.exports=strokeArc},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function strokeRect(x,y,width,height){if(arguments.length>2){return new Instruction("strokeRect",{x:x,y:y,width:width,height:height})}else{return new Instruction("strokeRect",{x:0,y:0,width:x,height:y})}}module.exports=strokeRect},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function fillStyle(value,children){var result=[new Instruction("strokeStyle",{value:value})];for(var i=1;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("endStrokeStyle"));return result}module.exports=fillStyle},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function strokeText(text,x,y,maxWidth){if(arguments.length<4){maxWidth=null}if(arguments.length<3){x=0;y=0}return new Instruction("strokeText",{text:text,x:x,y:y,maxWidth:maxWidth})}module.exports=strokeText},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function text(str,x,y,fill,stroke,maxWidth){if(arguments.length===6){return new Instruction("text",{x:x,y:y,fill:fill,stroke:stroke,text:str,maxWidth:maxWidth})}if(arguments.length===5){return new Instruction("text",{x:x,y:y,fill:fill,stroke:stroke,text:str,maxWidth:0})}if(arguments.length===4){return new Instruction("text",{x:x,y:y,fill:fill,stroke:false,text:str,maxWidth:0})}if(arguments.length===3){return new Instruction("text",{x:x,y:y,fill:true,stroke:false,text:str,maxWidth:0})}return new Instruction("text",{x:0,y:0,fill:true,stroke:false,text:str,maxWidth:0})}module.exports=text},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function textStyle(value,children){value=value||{};var result={font:null,textAlign:null,textBaseline:null,direction:null};if(typeof value.font!=="undefined"){result.font=value.font}if(typeof value.textAlign!=="undefined"){result.textAlign=value.textAlign}if(typeof value.textBaseline!=="undefined"){result.textBaseline=value.textBaseline}if(typeof value.direction!=="undefined"){result.direction=value.direction}var tree=[new Instruction("textStyle",value)];for(var i=1;i<arguments.length;i++){tree.push(arguments[i])}tree.push(new Instruction("endTextStyle"));return tree}module.exports=textStyle},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function transform(values,children){var transformResult=[new Instruction("transform",[values[0],values[1],values[2],values[3],values[4],values[5]])];for(var i=1;i<arguments.length;i++){transformResult.push(arguments[i])}transformResult.push(new Instruction("restore"));return transformResult}module.exports=transform},function(module,exports,__webpack_require__){"use strict";var Instruction=__webpack_require__(13);function translate(x,y,children){var result=[new Instruction("translate",{x:x,y:y})];for(var i=2;i<arguments.length;i++){result.push(arguments[i])}result.push(new Instruction("restore"));return result}module.exports=translate}])})},{}]},{},[]);var e2d=require("e2d");var r=e2d.Renderer.create(800,600);var cookie=new e2d.Img;var cookieShape;cookie.src="http://piecrust.org/wp-content/uploads/2016/03/Cookie1.gif";cookie.on("load",function(){cookieShape=e2d.createRegularPolygon(cookie.width/2,[0,0],100);console.log(cookieShape);return r.ready()});var factor=1;var frame=0;var rotationFrame=0;r.on("frame",function(){var hovering=r.mouseData.activeRegions.indexOf("cookie")!==-1;var clicked=r.mouseData.clicked;r.style({cursor:hovering?"pointer":"default"});if(hovering){frame+=frame===10?0:frame<10?1:-1}else{frame-=1}if(frame<0){frame=0}if(clicked&&hovering){frame=20}rotationFrame+=1;rotationFrame=rotationFrame%360;return r.render(e2d.clearRect(800,600),e2d.translate(400,300,e2d.scale(.8+frame*.01,e2d.rotate(rotationFrame*Math.PI*2/360,e2d.path(cookieShape.map(e2d.moveToLineTo)),e2d.fill(),e2d.hitRegion("cookie",cookieShape),e2d.translate(-cookie.width/2,-cookie.height/2,e2d.fillImage(cookie))))))})},0);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "e2d": "3.4.1"
  }
}

page-body.html

<!-- contents of this file will be placed inside the <body> -->

page-head.html

<!-- contents of this file will be placed inside the <head> -->

requirebin.md

made with requirebin