<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Canvas Example Trig</title>
<script src="nmlCanvasTrig.js"></script>
</head>
<body>
<p>
Before the canvas.
</p>
<canvas id="myCanvas"
width="300" height="300"
style="outline: 1px solid magenta;">
<p>Powered by HTML5 canvas</p>
</canvas>
<p>
After the canvas.
</p>
</body>
</html>
/*globals document, window */
'use strict';
/*
* nmlCanvasTrig.js
* function drawing a coordinate system and a unit circle
*/
var nelech = function () {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath(); // begin new path
ctx.arc(150, 100, 75, 0, Math.PI * 2, true);
// describe arc
ctx.strokeStyle = 'black'; // stroke color
ctx.fillStyle = '#cc9'; // set fill color
ctx.fill(); // fill the path
ctx.stroke(); // draw circumference
ctx.moveTo(60, 100);
ctx.lineTo(240, 100);
ctx.stroke();
ctx.moveTo(150, 10);
ctx.lineTo(150, 190);
ctx.stroke();
}
}
window.addEventListener('load', nelech);