July 21, 2014 19:55
diff --git a/jsbin.qoxalize.html b/jsbin.qoxalize.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>quadraticCurveTo given three points</title>
  
 <style>
  body { background:#000; margin:0px; padding:0px; overflow:hidden; }
 </style>
 </head>
 <body>
  <canvas id="canvas"></canvas> 
 </body>
 </html>
diff --git a/jsbin.qoxalize.js b/jsbin.qoxalize.js
 $(function() {
    var canvas = $('canvas');
    var ctx = canvas[0].getContext('2d');
    var width  = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    canvas.css('border', '1px solid white;');
    var pts = [];
  
  
    function drawPoint(evt) {
      var pt = {
        x: parseInt(evt.pageX - canvas.offset().left),
        y: parseInt(evt.pageY - canvas.offset().top)
      };
      circle(pt.x, pt.y, 2);
      pts.push(pt);
      
      if (pts.length == 3) {
        ctx.beginPath();
        ctx.moveTo(pts[0].x, pts[0].y);
        ctx.quadraticCurveTo(pts[1].x, pts[1].y, pts[2].x, pts[2].y);
        ctx.strokeStyle = '#ccc';
        ctx.stroke();
        pts.shift(); pts.shift();
      }
    } // drawPoint(evt)
    
    function circle(cx, cy, r) {
      ctx.beginPath();
      ctx.arc(cx, cy, r, 0, 2*Math.PI, false);
      ctx.strokeStyle = '#ffffff';
      ctx.fillStyle = 'white';
      ctx.fill();
      ctx.stroke();
    }
    
    function rgb() {
      color = 'rgb(';
      for(var i = 0; i< 3; i++) {
        color += Math.floor(Math.random() * 255)+',';
      }
      return color.replace(/\,$/,')');
    }
  
    $('canvas').mousedown(drawPoint);
    
  });
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>quadraticCurveTo given three points</title>

	<style>
	body { background:#000; margin:0px; padding:0px; overflow:hidden; }
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>
	</body>
	</html>
	$(function() {
	var canvas = $('canvas');
	var ctx = canvas[0].getContext('2d');
	var width = window.innerWidth;
	var height = window.innerHeight;
	canvas.height = height;
	canvas.width = width;
	canvas.css('border', '1px solid white;');
	var pts = [];


	function drawPoint(evt) {
	var pt = {
	x: parseInt(evt.pageX - canvas.offset().left),
	y: parseInt(evt.pageY - canvas.offset().top)
	};
	circle(pt.x, pt.y, 2);
	pts.push(pt);

	if (pts.length == 3) {
	ctx.beginPath();
	ctx.moveTo(pts[0].x, pts[0].y);
	ctx.quadraticCurveTo(pts[1].x, pts[1].y, pts[2].x, pts[2].y);
	ctx.strokeStyle = '#ccc';
	ctx.stroke();
	pts.shift(); pts.shift();
	}
	} // drawPoint(evt)

	function circle(cx, cy, r) {
	ctx.beginPath();
	ctx.arc(cx, cy, r, 0, 2*Math.PI, false);
	ctx.strokeStyle = '#ffffff';
	ctx.fillStyle = 'white';
	ctx.fill();
	ctx.stroke();
	}

	function rgb() {
	color = 'rgb(';
	for(var i = 0; i< 3; i++) {
	color += Math.floor(Math.random() * 255)+',';
	}
	return color.replace(/\,$/,')');
	}

	$('canvas').mousedown(drawPoint);

	});