requirebin sketch

index.js

var testBed = require('canvas-testbed');

var timeStart = Date.now()

//called every frame
function render(context, width, height) {
  var now = Date.now()
  var msElapsed = now - timeStart
  
  context.clearRect(0, 0, width, height)
  context.fillRect(250, 150, 200, 100)
}

//setup the testbed
testBed(render)

minified.js

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}({1:[function(require,module,exports){var isGL=require("is-webgl-context");var getGL=require("webgl-context");var debounce=require("debounce");var addEvent=require("add-event-listener");function isCanvasContext(obj){var ctx2d=typeof CanvasRenderingContext2D!=="undefined"&&obj instanceof CanvasRenderingContext2D;return obj&&(ctx2d||isGL(obj))}function CanvasApp(render,options){if(!(this instanceof CanvasApp))return new CanvasApp(render,options);if(typeof render==="object"&&render){options=render;render=null}render=typeof render==="function"?render:options.onRender;options=options||{};options.retina=typeof options.retina==="boolean"?options.retina:true;var hasWidth=typeof options.width==="number",hasHeight=typeof options.height==="number";if(hasWidth||hasHeight)options.ignoreResize=true;options.width=hasWidth?options.width:window.innerWidth;options.height=hasHeight?options.height:window.innerHeight;var DPR=options.retina?window.devicePixelRatio||1:1;var canvas,context,attribs=options.contextAttributes||{};this.isWebGL=false;if(isCanvasContext(options.context)){context=options.context;canvas=context.canvas}if(!canvas)canvas=options.canvas||document.createElement("canvas");canvas.width=options.width*DPR;canvas.height=options.height*DPR;if(!context){if(options.context==="webgl"||options.context==="experimental-webgl"){context=getGL({canvas:canvas,attributes:attribs});if(!context){throw"WebGL Context Not Supported -- try enabling it or using a different browser"}}else{context=canvas.getContext(options.context||"2d",attribs)}}this.isWebGL=isGL(context);if(options.retina){canvas.style.width=options.width+"px";canvas.style.height=options.height+"px"}this.running=false;this.width=options.width;this.height=options.height;this.canvas=canvas;this.context=context;this.onResize=options.onResize;this._DPR=DPR;this._retina=options.retina;this._once=options.once;this._ignoreResize=options.ignoreResize;this._lastFrame=null;this._then=Date.now();this.maxDeltaTime=typeof options.maxDeltaTime==="number"?options.maxDeltaTime:1e3/24;this.fps=60;this._frames=0;this._prevTime=this._then;if(!this._ignoreResize){options.resizeDebounce=typeof options.resizeDebounce==="number"?options.resizeDebounce:50;addEvent(window,"resize",debounce(function(){this.resize(window.innerWidth,window.innerHeight)}.bind(this),options.resizeDebounce,false));addEvent(window,"orientationchange",function(){this.resize(window.innerWidth,window.innerHeight)}.bind(this))}if(typeof render==="function"){this.onRender=render.bind(this)}else{this.onRender=function(context,width,height,dt){}}this.renderOnce=function(){var now=Date.now();var dt=Math.min(this.maxDeltaTime,now-this._then);this._frames++;if(now>this._prevTime+1e3){this.fps=Math.round(this._frames*1e3/(now-this._prevTime));this._prevTime=now;this._frames=0}if(!this.isWebGL){this.context.save();this.context.scale(this._DPR,this._DPR)}else{this.context.viewport(0,0,this.width*this._DPR,this.height*this._DPR)}this.onRender(this.context,this.width,this.height,dt);if(!this.isWebGL)this.context.restore();this._then=now};this._renderHandler=function(){if(!this.running)return;if(!this._once){this._lastFrame=requestAnimationFrame(this._renderHandler)}this.renderOnce()}.bind(this);if(typeof options.onReady==="function"){options.onReady.call(this,context,this.width,this.height)}}Object.defineProperty(CanvasApp.prototype,"retinaEnabled",{set:function(v){this._retina=v;this._DPR=this._retina?window.devicePixelRatio||1:1;this.resize(this.width,this.height)},get:function(){return this._retina}});Object.defineProperty(CanvasApp.prototype,"deviceWidth",{get:function(){return this.width*this._DPR}});Object.defineProperty(CanvasApp.prototype,"deviceHeight",{get:function(){return this.height*this._DPR}});CanvasApp.prototype.resetFPS=function(){this._frames=0;this._prevTime=Date.now();this._then=this._prevTime;this.fps=60};CanvasApp.prototype.start=function(){if(this.running)return;if(this._lastFrame)cancelAnimationFrame(this._lastFrame);this.resetFPS();this.running=true;this._lastFrame=requestAnimationFrame(this._renderHandler)};CanvasApp.prototype.stop=function(){if(this._lastFrame){cancelAnimationFrame(this._lastFrame);this._lastFrame=null}this.running=false};CanvasApp.prototype.resize=function(width,height){var canvas=this.canvas;this.width=width;this.height=height;canvas.width=this.width*this._DPR;canvas.height=this.height*this._DPR;if(this._retina){canvas.style.width=this.width+"px";canvas.style.height=this.height+"px"}if(this._once)requestAnimationFrame(this._renderHandler);if(typeof this.onResize==="function")this.onResize(this.width,this.height)};module.exports=CanvasApp},{"add-event-listener":2,debounce:3,"is-webgl-context":5,"webgl-context":6}],2:[function(require,module,exports){addEventListener.removeEventListener=removeEventListener;addEventListener.addEventListener=addEventListener;module.exports=addEventListener;var Events=null;function addEventListener(el,eventName,listener,useCapture){Events=Events||(document.addEventListener?{add:stdAttach,rm:stdDetach}:{add:oldIEAttach,rm:oldIEDetach});return Events.add(el,eventName,listener,useCapture)}function removeEventListener(el,eventName,listener,useCapture){Events=Events||(document.addEventListener?{add:stdAttach,rm:stdDetach}:{add:oldIEAttach,rm:oldIEDetach});return Events.rm(el,eventName,listener,useCapture)}function stdAttach(el,eventName,listener,useCapture){el.addEventListener(eventName,listener,useCapture)}function stdDetach(el,eventName,listener,useCapture){el.removeEventListener(eventName,listener,useCapture)}function oldIEAttach(el,eventName,listener,useCapture){if(useCapture){throw new Error("cannot useCapture in oldIE")}el.attachEvent("on"+eventName,listener)}function oldIEDetach(el,eventName,listener,useCapture){el.detachEvent("on"+eventName,listener)}},{}],3:[function(require,module,exports){var now=require("date-now");module.exports=function debounce(func,wait,immediate){var timeout,args,context,timestamp,result;if(null==wait)wait=100;function later(){var last=now()-timestamp;if(last<wait&&last>0){timeout=setTimeout(later,wait-last)}else{timeout=null;if(!immediate){result=func.apply(context,args);if(!timeout)context=args=null}}}return function debounced(){context=this;args=arguments;timestamp=now();var callNow=immediate&&!timeout;if(!timeout)timeout=setTimeout(later,wait);if(callNow){result=func.apply(context,args);context=args=null}return result}}},{"date-now":4}],4:[function(require,module,exports){module.exports=Date.now||now;function now(){return(new Date).getTime()}},{}],5:[function(require,module,exports){module.exports=function(ctx){if(!ctx)return false;var gl=ctx;if(typeof ctx.rawgl!=="undefined")gl=ctx.rawgl;if(typeof WebGLRenderingContext!=="undefined"&&gl instanceof WebGLRenderingContext)return true;return false}},{}],6:[function(require,module,exports){module.exports=function(opts){opts=opts||{};var canvas=opts.canvas||document.createElement("canvas");if(typeof opts.width==="number")canvas.width=opts.width;if(typeof opts.height==="number")canvas.height=opts.height;var attribs=opts.attributes||opts.attribs||{};try{gl=canvas.getContext("webgl",attribs)||canvas.getContext("experimental-webgl",attribs)}catch(e){gl=null}return gl}},{}],7:[function(require,module,exports){!function(name,definition){if(typeof module!="undefined")module.exports=definition();else if(typeof define=="function"&&typeof define.amd=="object")define(definition);else this[name]=definition()}("domready",function(){var fns=[],listener,doc=document,hack=doc.documentElement.doScroll,domContentLoaded="DOMContentLoaded",loaded=(hack?/^loaded|^c/:/^loaded|^i|^c/).test(doc.readyState);if(!loaded)doc.addEventListener(domContentLoaded,listener=function(){doc.removeEventListener(domContentLoaded,listener);loaded=1;while(listener=fns.shift())listener()});return function(fn){loaded?setTimeout(fn,0):fns.push(fn)}})},{}],8:[function(require,module,exports){(function(window){var lastTime=0,vendors=["webkit","moz"],requestAnimationFrame=window.requestAnimationFrame,cancelAnimationFrame=window.cancelAnimationFrame,i=vendors.length;while(--i>=0&&!requestAnimationFrame){requestAnimationFrame=window[vendors[i]+"RequestAnimationFrame"];cancelAnimationFrame=window[vendors[i]+"CancelAnimationFrame"]}if(!requestAnimationFrame||!cancelAnimationFrame){requestAnimationFrame=function(callback){var now=+new Date,nextTime=Math.max(lastTime+16,now);return setTimeout(function(){callback(lastTime=nextTime)},nextTime-now)};cancelAnimationFrame=clearTimeout}window.requestAnimationFrame=requestAnimationFrame;window.cancelAnimationFrame=cancelAnimationFrame})(window)},{}],"canvas-testbed":[function(require,module,exports){var domready=require("domready");require("raf.js");var CanvasApp=require("canvas-app");module.exports=function(render,start,options){domready(function(){if(typeof render==="object"&&render){options=render;render=null;start=null}else if(typeof start==="object"&&start){options=start;start=null}options=options||{};if(typeof options.onReady!=="function")options.onReady=start;var runner=CanvasApp(render,options);runner.canvas.setAttribute("id","canvas");document.body.appendChild(runner.canvas);document.body.style.margin="0";document.body.style.overflow="hidden";runner.start()})}},{"canvas-app":1,domready:7,"raf.js":8}]},{},[]);var testBed=require("canvas-testbed");var timeStart=Date.now();function render(context,width,height){var now=Date.now();var msElapsed=now-timeStart;context.clearRect(0,0,width,height);context.fillRect(250,150,200,100)}testBed(render);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "canvas-testbed": "1.0.3"
  }
}

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