ikr7/canvas-utils.js

## canvas-utils.js
(function(global){

	var cUtils = {};

	cUtils.override = function(CanvasRenderingContext2D){

		CanvasRenderingContext2D.prototype.flush = function(){
			this.clearRect(0, 0, this.canvas.width, this.canvas.height);
		};

		CanvasRenderingContext2D.prototype.point = function(x, y){
			this.save();
			this.beginPath();
			this.arc(x, y, 3, 0, 2 * Math.PI);
			this.closePath();
			this.fillStyle = 'red';
			this.fill();
			this.restore();
		};

		CanvasRenderingContext2D.prototype.line = function(x1, y1, x2, y2){
			this.save();
			this.beginPath();
			this.moveTo(x1, y1);
			this.lineTo(x2, y2);
			this.strokeStyle = 'black';
			this.lineCap = 'round';
			this.lineWidth = 2;
			this.stroke();
			this.restore();
		};

	};

	global.cUtils = cUtils;

})(this);

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>two-degrees-of-freedom</title>
	<meta charset="UTF-8">
	<style>

canvas {
	margin: 10px;
	border: 1px solid #000;
}

	</style>
</head>
<body>
	<canvas></canvas>
	<script src="./canvas-utils.js"></script>
	<script>

cUtils.override(CanvasRenderingContext2D);

var w = 500;
var h = 500;

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

canvas.width = w;
canvas.height = h

var baseX = w / 2;
var baseY = h / 2;

var l1 = 100;
var l2 = 100;

canvas.addEventListener('mousemove', function(e){

	context.flush();

	var x = e.offsetX - baseX;
	var y = e.offsetY - baseY;

	if(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) > l1 + l2){
		context.fillStyle = 'red';
		context.fillRect(0, 0, w, h);
		return;
	}

	var D = (Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(l1, 2) - Math.pow(l2, 2)) / (2 * l1);
	var E = (Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(l1, 2) + Math.pow(l2, 2)) / (2 * l2);

	var q1 = Math.atan2(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(D, 2)), D) + Math.atan2(y, x);
	var q2 = Math.atan2(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(E, 2)), D) - Math.atan2(-Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(D, 2)), D);

	var l1x = Math.cos(q1) * l1;
	var l1y = Math.sin(q1) * l1;

	var l2x = Math.cos(q1 - q2) * l2;
	var l2y = Math.sin(q1 - q2) * l2;

	// Draw arm 1
	context.line(
		baseX,
		baseY,
		baseX + l1x,
		baseY + l1y
	);

	// Draw arm 2
	context.line(
		baseX + l1x,
		baseY + l1y,
		baseX + l1x + l2x,
		baseY + l1y + l2y
	);

	context.point(
		baseX,
		baseY
	);

	context.point(
		baseX + x,
		baseY + y
	);

});

	</script>
</body>
</html>
	(function(global){

	var cUtils = {};

	cUtils.override = function(CanvasRenderingContext2D){

	CanvasRenderingContext2D.prototype.flush = function(){
	this.clearRect(0, 0, this.canvas.width, this.canvas.height);
	};

	CanvasRenderingContext2D.prototype.point = function(x, y){
	this.save();
	this.beginPath();
	this.arc(x, y, 3, 0, 2 * Math.PI);
	this.closePath();
	this.fillStyle = 'red';
	this.fill();
	this.restore();
	};

	CanvasRenderingContext2D.prototype.line = function(x1, y1, x2, y2){
	this.save();
	this.beginPath();
	this.moveTo(x1, y1);
	this.lineTo(x2, y2);
	this.strokeStyle = 'black';
	this.lineCap = 'round';
	this.lineWidth = 2;
	this.stroke();
	this.restore();
	};

	};

	global.cUtils = cUtils;

	})(this);
	<!DOCTYPE html>
	<html>
	<head>
	<title>two-degrees-of-freedom</title>
	<meta charset="UTF-8">
	<style>

	canvas {
	margin: 10px;
	border: 1px solid #000;
	}

	</style>
	</head>
	<body>
	<canvas></canvas>
	<script src="./canvas-utils.js"></script>
	<script>

	cUtils.override(CanvasRenderingContext2D);

	var w = 500;
	var h = 500;

	var canvas = document.querySelector('canvas');
	var context = canvas.getContext('2d');

	canvas.width = w;
	canvas.height = h

	var baseX = w / 2;
	var baseY = h / 2;

	var l1 = 100;
	var l2 = 100;

	canvas.addEventListener('mousemove', function(e){

	context.flush();

	var x = e.offsetX - baseX;
	var y = e.offsetY - baseY;

	if(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) > l1 + l2){
	context.fillStyle = 'red';
	context.fillRect(0, 0, w, h);
	return;
	}

	var D = (Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(l1, 2) - Math.pow(l2, 2)) / (2 * l1);
	var E = (Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(l1, 2) + Math.pow(l2, 2)) / (2 * l2);

	var q1 = Math.atan2(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(D, 2)), D) + Math.atan2(y, x);
	var q2 = Math.atan2(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(E, 2)), D) - Math.atan2(-Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) - Math.pow(D, 2)), D);

	var l1x = Math.cos(q1) * l1;
	var l1y = Math.sin(q1) * l1;

	var l2x = Math.cos(q1 - q2) * l2;
	var l2y = Math.sin(q1 - q2) * l2;

	// Draw arm 1
	context.line(
	baseX,
	baseY,
	baseX + l1x,
	baseY + l1y
	);

	// Draw arm 2
	context.line(
	baseX + l1x,
	baseY + l1y,
	baseX + l1x + l2x,
	baseY + l1y + l2y
	);

	context.point(
	baseX,
	baseY
	);

	context.point(
	baseX + x,
	baseY + y
	);

	});

	</script>
	</body>
	</html>