nacho4d/bezier.html

## bezier.html
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>
        	function drawGrid(context, squareSide, gridFrame) {
        		context.lineWidth = 1;

        	    //Draw vertical lines
        	    for (var i = 0; i < gridFrame.w; i += squareSide) {
        	    	context.moveTo(gridFrame.x + i, gridFrame.y);
        	    	context.lineTo(gridFrame.x + i, gridFrame.y + gridFrame.h);
        	    	context.stroke();
        	    }
        	    context.moveTo(gridFrame.x + gridFrame.w, gridFrame.y);
        	    context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + gridFrame.h);
       	    	context.stroke();

 				// Draw horizontal lines
 				for (var j = 0; j < gridFrame.h; j += squareSide) {
 					context.moveTo(gridFrame.x, gridFrame.y + j);
 					context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + j);
 					context.stroke();
 				}
 				context.moveTo(gridFrame.x, gridFrame.y + gridFrame.h);
 				context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + gridFrame.h);
 				context.stroke();

        	}

            function conv(x) {
            	return x*150 + 250;
            }

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

				// Grid
				context.save();
				context.lineWidth = 1;
				context.strokeStyle = "DDDDDD";
				context.beginPath();
                drawGrid(context, 50, {'x':0, 'y':0, 'w':500, 'h':500});
                context.closePath();
                context.strokeStyle = "8E8F8F";
                context.beginPath();
                drawGrid(context, 50, {'x':100, 'y':100, 'w':300, 'h':300});
                context.closePath();
                context.restore();

                //context.moveTo(188, 130);

                var controlX1 = conv(1.3);
                var controlY1 = conv(-0.05);
                var controlX2 = conv(0.92);
                var controlY2 = conv(0.2);
                var endX = conv(1);
                var endY = conv(1);
                var startX = conv(0);
                var startY = conv(0);

				// Draw control points
				var radius = 1;
				context.beginPath();
				context.strokeStyle = "blue";
				context.arc(startX, startY, radius, 0, 2 * Math.PI, false);
				context.stroke();
				context.arc(controlX1, controlY1, radius, 0, 2 * Math.PI, false);
				context.stroke();
				context.arc(controlX2, controlY2, radius, 0, 2 * Math.PI, false);
				context.stroke();
				context.arc(endX, endY, radius, 0, 2 * Math.PI, false);
				context.stroke();

				// Draw bezier
                context.beginPath();
                context.moveTo(startX, startY);
                context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
                context.lineWidth = 2;
                context.strokeStyle = "red";
                context.stroke();
                context.closePath();
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="500" height="500">
        </canvas>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	#myCanvas {
	border: 1px solid #9C9898;
	}
	</style>
	<script>
	function drawGrid(context, squareSide, gridFrame) {
	context.lineWidth = 1;

	//Draw vertical lines
	for (var i = 0; i < gridFrame.w; i += squareSide) {
	context.moveTo(gridFrame.x + i, gridFrame.y);
	context.lineTo(gridFrame.x + i, gridFrame.y + gridFrame.h);
	context.stroke();
	}
	context.moveTo(gridFrame.x + gridFrame.w, gridFrame.y);
	context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + gridFrame.h);
	context.stroke();

	// Draw horizontal lines
	for (var j = 0; j < gridFrame.h; j += squareSide) {
	context.moveTo(gridFrame.x, gridFrame.y + j);
	context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + j);
	context.stroke();
	}
	context.moveTo(gridFrame.x, gridFrame.y + gridFrame.h);
	context.lineTo(gridFrame.x + gridFrame.w, gridFrame.y + gridFrame.h);
	context.stroke();

	}

	function conv(x) {
	return x*150 + 250;
	}

	window.onload = function(){
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");

	// Grid
	context.save();
	context.lineWidth = 1;
	context.strokeStyle = "DDDDDD";
	context.beginPath();
	drawGrid(context, 50, {'x':0, 'y':0, 'w':500, 'h':500});
	context.closePath();
	context.strokeStyle = "8E8F8F";
	context.beginPath();
	drawGrid(context, 50, {'x':100, 'y':100, 'w':300, 'h':300});
	context.closePath();
	context.restore();

	//context.moveTo(188, 130);

	var controlX1 = conv(1.3);
	var controlY1 = conv(-0.05);
	var controlX2 = conv(0.92);
	var controlY2 = conv(0.2);
	var endX = conv(1);
	var endY = conv(1);
	var startX = conv(0);
	var startY = conv(0);

	// Draw control points
	var radius = 1;
	context.beginPath();
	context.strokeStyle = "blue";
	context.arc(startX, startY, radius, 0, 2 * Math.PI, false);
	context.stroke();
	context.arc(controlX1, controlY1, radius, 0, 2 * Math.PI, false);
	context.stroke();
	context.arc(controlX2, controlY2, radius, 0, 2 * Math.PI, false);
	context.stroke();
	context.arc(endX, endY, radius, 0, 2 * Math.PI, false);
	context.stroke();

	// Draw bezier
	context.beginPath();
	context.moveTo(startX, startY);
	context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
	context.lineWidth = 2;
	context.strokeStyle = "red";
	context.stroke();
	context.closePath();
	};
	</script>
	</head>
	<body onmousedown="return false;">
	<canvas id="myCanvas" width="500" height="500">
	</canvas>
	</body>
	</html>