Glench/canvas_draw.html

## canvas_draw.html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            html, body {
                margin: 0;
                padding: 0;
            }
            canvas {
                border: 1px solid #eee;
            }
            #wrapper {
                margin: 30px auto;
                width: 502px;
                text-align: center
            }
        </style>
        <!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> -->
    </head>
    <body>

        <div id="wrapper">
            <canvas id="canvas" width="400" height="300"></canvas>
            <div id="equation"></div>
        </div>

        <script src="https://rawgit.com/Tom-Alexander/regression-js/master/src/regression.js"></script>
        <script src="http://underscorejs.org/underscore-min.js"></script>
        <!-- <script src="http://epeli.github.io/underscore.string/lib/underscore.string.js"></script> -->
        <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
        <!-- <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
        <script type="text/javascript">
            window.debug = false
            function drawAxis(x1,y1,x2,y2, canvasContext) {
                canvasContext.strokeStyle = '#ccc';

                canvasContext.beginPath();
                canvasContext.moveTo(x1, y1)
                canvasContext.lineTo(x2, y2);
                canvasContext.stroke();
            }
            function drawAxes(canvasContext, width, height) {

                var percent = .2
                var inverse = 1-percent
                var x1 = width*percent
                var y1 = height*percent
                var x2 = width*inverse
                var y2 = height*inverse

                // draw two horizontal lines, left to right
                drawAxis(0,y1,width,y1, canvasContext)
                drawAxis(0,y2,width,y2, canvasContext)

                // draw two vertical lines, top to bottom
                drawAxis(x1,0,x1,height, canvasContext)
                drawAxis(x2,0,x2,height, canvasContext)
            }
            function clearDrawing(canvasContext) {
                // Store the current transformation matrix
                canvasContext.save();

                // Use the identity matrix while clearing the canvas
                canvasContext.setTransform(1, 0, 0, 1, 0, 0);
                canvasContext.clearRect(0, 0, canvas.width, canvas.height);

                // Restore the transform
                canvasContext.restore();
                drawAxes(canvasContext, $('canvas').width(), $('canvas').height())
            }

            window.mouseDown = false;
            window.curveCoordinates = []

            function drawStart(evt, canvasContext) {
                window.mouseDown = true
                window.curveCoordinates = []
                clearDrawing(canvasContext)

                canvasContext.strokeStyle = '#9370DB';
                canvasContext.lineWidth = 2;
                canvasContext.beginPath();
            }
            function draw(evt, canvasContext) {
                if (window.mouseDown) {
                    var x = evt.offsetX
                    var y = evt.offsetY

                    window.curveCoordinates.push([x,y])

                    if (window.debug) {
                        canvasContext.fillStyle = "blue"
                        canvasContext.fillRect(x, y, 1, 1 );
                    } else {
                        canvasContext.lineTo(x, y);
                        canvasContext.stroke();
                        canvasContext.moveTo(x, y)
                    }

                }
            }
            function drawEnd(evt, canvasContext) {
                window.mouseDown = false
                drawBestFit(canvasContext)
            }
            function drawBestFit(canvasContext) {
                var obj = curveFit()
                var points = obj.points
                $('#equation').text(obj.string)
                canvasContext.strokeStyle = 'blue';
                canvasContext.lineWidth = 2;
                canvasContext.beginPath();
                for (var i=0; i < points.length; ++i) {
                    var x = points[i][0]
                    var y = points[i][1]
                    if (window.debug) {
                        canvasContext.fillStyle = "blue"
                        canvasContext.fillRect(x, y, 1, 1 );
                    } else {
                        canvasContext.lineTo(x, y);
                        canvasContext.stroke();
                        canvasContext.moveTo(x, y)
                    }
                }
            }
            function curveFit() {
                var obj = regression('polynomial', window.curveCoordinates, 8)
                obj.func = functifyCurveFit(obj.equation)
                return obj
            }
            function functifyCurveFit(parameters) {
                // create a function of ax^8 + bx^7 + ...
                return function(x) {
                    return parameters.reduce(function(previousValue, currentValue, i) {
                        return previousValue + currentValue * Math.power(x, parameters.length - 1 - i)
                    })
                }
            }

            $(document).on("ready", function(evt) {
                var canvas = document.getElementById("canvas");
                var $canvas = $(canvas)

                var canvasContext = canvas.getContext('2d')

                drawAxes(canvasContext, $canvas.width(), $canvas.height())

                $canvas.on('mousedown touchstart', function(evt) {drawStart(evt, canvasContext)} )
                $canvas.on('mousemove touchmove', function(evt) {draw(evt, canvasContext)} )
                // $canvas.on('mouseup touchend touchcancel', drawEnd)

                $(document).on('mouseup touchend touchcancel', function(evt) {drawEnd(evt, canvasContext)} )
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	}
	canvas {
	border: 1px solid #eee;
	}
	#wrapper {
	margin: 30px auto;
	width: 502px;
	text-align: center
	}
	</style>
	<!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> -->
	</head>
	<body>

	<div id="wrapper">
	<canvas id="canvas" width="400" height="300"></canvas>
	<div id="equation"></div>
	</div>

	<script src="https://rawgit.com/Tom-Alexander/regression-js/master/src/regression.js"></script>
	<script src="http://underscorejs.org/underscore-min.js"></script>
	<!-- <script src="http://epeli.github.io/underscore.string/lib/underscore.string.js"></script> -->
	<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
	<!-- <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
	<script type="text/javascript">
	window.debug = false
	function drawAxis(x1,y1,x2,y2, canvasContext) {
	canvasContext.strokeStyle = '#ccc';

	canvasContext.beginPath();
	canvasContext.moveTo(x1, y1)
	canvasContext.lineTo(x2, y2);
	canvasContext.stroke();
	}
	function drawAxes(canvasContext, width, height) {

	var percent = .2
	var inverse = 1-percent
	var x1 = width*percent
	var y1 = height*percent
	var x2 = width*inverse
	var y2 = height*inverse

	// draw two horizontal lines, left to right
	drawAxis(0,y1,width,y1, canvasContext)
	drawAxis(0,y2,width,y2, canvasContext)

	// draw two vertical lines, top to bottom
	drawAxis(x1,0,x1,height, canvasContext)
	drawAxis(x2,0,x2,height, canvasContext)
	}
	function clearDrawing(canvasContext) {
	// Store the current transformation matrix
	canvasContext.save();

	// Use the identity matrix while clearing the canvas
	canvasContext.setTransform(1, 0, 0, 1, 0, 0);
	canvasContext.clearRect(0, 0, canvas.width, canvas.height);

	// Restore the transform
	canvasContext.restore();
	drawAxes(canvasContext, $('canvas').width(), $('canvas').height())
	}

	window.mouseDown = false;
	window.curveCoordinates = []

	function drawStart(evt, canvasContext) {
	window.mouseDown = true
	window.curveCoordinates = []
	clearDrawing(canvasContext)

	canvasContext.strokeStyle = '#9370DB';
	canvasContext.lineWidth = 2;
	canvasContext.beginPath();
	}
	function draw(evt, canvasContext) {
	if (window.mouseDown) {
	var x = evt.offsetX
	var y = evt.offsetY

	window.curveCoordinates.push([x,y])

	if (window.debug) {
	canvasContext.fillStyle = "blue"
	canvasContext.fillRect(x, y, 1, 1 );
	} else {
	canvasContext.lineTo(x, y);
	canvasContext.stroke();
	canvasContext.moveTo(x, y)
	}

	}
	}
	function drawEnd(evt, canvasContext) {
	window.mouseDown = false
	drawBestFit(canvasContext)
	}
	function drawBestFit(canvasContext) {
	var obj = curveFit()
	var points = obj.points
	$('#equation').text(obj.string)
	canvasContext.strokeStyle = 'blue';
	canvasContext.lineWidth = 2;
	canvasContext.beginPath();
	for (var i=0; i < points.length; ++i) {
	var x = points[i][0]
	var y = points[i][1]
	if (window.debug) {
	canvasContext.fillStyle = "blue"
	canvasContext.fillRect(x, y, 1, 1 );
	} else {
	canvasContext.lineTo(x, y);
	canvasContext.stroke();
	canvasContext.moveTo(x, y)
	}
	}
	}
	function curveFit() {
	var obj = regression('polynomial', window.curveCoordinates, 8)
	obj.func = functifyCurveFit(obj.equation)
	return obj
	}
	function functifyCurveFit(parameters) {
	// create a function of ax^8 + bx^7 + ...
	return function(x) {
	return parameters.reduce(function(previousValue, currentValue, i) {
	return previousValue + currentValue * Math.power(x, parameters.length - 1 - i)
	})
	}
	}

	$(document).on("ready", function(evt) {
	var canvas = document.getElementById("canvas");
	var $canvas = $(canvas)

	var canvasContext = canvas.getContext('2d')

	drawAxes(canvasContext, $canvas.width(), $canvas.height())

	$canvas.on('mousedown touchstart', function(evt) {drawStart(evt, canvasContext)} )
	$canvas.on('mousemove touchmove', function(evt) {draw(evt, canvasContext)} )
	// $canvas.on('mouseup touchend touchcancel', drawEnd)

	$(document).on('mouseup touchend touchcancel', function(evt) {drawEnd(evt, canvasContext)} )
	});
	</script>
	</body>
	</html>