requirebin sketch

index.js

var cnvsGrad = require('canvas-gradaint');

//canvas setup
var canvas  =  document.createElement('canvas');
canvas.width = '500';
canvas.height = '300';
canvas.style.outline = "1px solid black";
document.body.appendChild(canvas);

// Get the context.
var ctx = canvas.getContext('2d');

// Set up color stop points
var cs = [
  {color:"black", position:0}, 
  {color:"grey",position:0.5},
  {color:"white",position:1}
];

// Draw gradient.
cnvsGrad(ctx).linear(0,0,500,0,cs);

// Similarly for radial cnvsGrad(ctx).radial(100,100,100,0,cs);

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}({"canvas-gradient":[function(require,module,exports){"use strict";module.exports=function(ctx,gx1,gy1,gx2,gy2,colorStops){var fx=arguments[6]===undefined?0:arguments[6];var fy=arguments[7]===undefined?0:arguments[7];var fw=arguments[8]===undefined?ctx.canvas.width:arguments[8];var fh=arguments[9]===undefined?ctx.canvas.height:arguments[9];return function(){var gradiant=undefined;ctx.save();gradiant=ctx.createLinearGradient(gx1,gy1,gx2,gy2);colorStops.forEach(function(colorStop){return gradiant.addColorStop(colorStop.position,colorStop.color)});ctx.fillStyle=gradiant;ctx.fillRect(fx,fy,fw,fh);ctx.restore()}()}},{}]},{},[]);var cnvsGrad=require("canvas-gradient");var canvas=document.createElement("canvas");canvas.width="500";canvas.height="300";canvas.style.outline="1px solid black";document.body.appendChild(canvas);var ctx=canvas.getContext("2d");var cs=[{color:"black",position:0},{color:"grey",position:.5},{color:"white",position:1}];cnvsGrad(ctx).linear(0,0,500,0,cs);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "canvas-gradient": "0.1.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin