<!DOCTYPE html>
<html>
<head>
<title>Trigonometry</title>
<style type="text/css">
canvas {
border-width: 1px;
border-style: solid;
border-color: #000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var functions = ["sin", "cos", "tan"];
for (var i = 0; i < functions.length; ++i) {
var func = functions[i];
var canvas = document.getElementById(func);
var ctx = canvas.getContext("2d");
for (var x = 0; x < canvas.width; ++x) {
var y = -Math[func](x / 20) * canvas.height / 4 + canvas.height / 2;
ctx.fillStyle = "red";
ctx.fillRect(x-1, y-1, 2, 2);
ctx.fillStyle = "black";
ctx.fillRect(x, canvas.height / 2, 1, 1);
}
}
});
</script>
</head>
<body>
<h1>Sine</h1>
<canvas id="sin" width="300" height="100"></canvas>
<h1>Cosine</h1>
<canvas id="cos" width="300" height="100"></canvas>
<h1>Tangent</h1>
<canvas id="tan" width="300" height="100"></canvas>
</body>
</html>
