React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var stage = document.createElement('canvas');
      
      var browserX = window.screenX;
      var browserY = window.screenY;
      var balls = [];
      var total = 5;
      var currentDrag = null;
      var mouseX = 0;
      var mouseY = 0;
      var stageWidth = $(document).width();
      var stageHeight = $(document).height();
      stage.width = stageWidth;
      stage.height = stageHeight;
      
      var IE = document.all ? true : false;
      if(!IE) document.addEventListener(Event.MOUSEMOVE, getMouseXY, false);
      document.onmousemove = getMouseXY;
      
      window.onresize = function(event)
      {
        stage.width = 10;
        stage.height = 10;
        stageWidth = $(document).width();
        stageHeight = $(document).height();
        stage.width = stageWidth;
        stage.height = stageHeight;
      }
      
      generate();
      
      var drawingCanvas = stage;
      if(drawingCanvas.getContext)
      {
        var context = drawingCanvas.getContext('2d');
        setInterval(render, 20);
      }
      
      
      
      jQuery(document).ready(function()
      {
        $(document).mousedown(function(e)
        {
          onMouseDown();
        });
        
        $(document).mouseup(function(e)
        {
          onMouseUp();
        }); 
      })

      
      
      function onMouseDown()
      {
        var j = balls.length;
        while(--j > -1)
        {
          var dx = mouseX - balls[j].x;
          var dy = mouseY - balls[j].y;
          var dist = Math.sqrt(dx * dx + dy * dy);
          if(dist < balls[j].size/2)
          {
            currentDrag = balls[j];
            currentDrag.dragging = true;
            return;
          }
        }
      }
      
      function onMouseUp()
      {
        if(currentDrag != null) currentDrag.dragging = false;
      }
      
      
      
      
      function generate()
      {
        for(var i = 0; i < total; i++)
        {
          var ball = {};
          ball.color...