Kinetic.js

_.md

[ Launch: Canvas exmpla ] 5328735 by roundrobin
[ Launch: sin waves ] 5325290 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"Kinetic.js","endpoint":"","display":"canvas","public":true,"require":[{"name":"Kinetic","url":"http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"}],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/UzjS3kI.png"}

inlet.js

 var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();

var rect = new Kinetic.Rect({
  x: 239,
  y: 75,
  width: 91,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 4
});

// add the shape to the layer
layer.add(rect);

// add the layer to the stage
stage.add(layer);