<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Canvas Example Trig</title>
<script src="nmlObjCanvas.js"></script>
<script src="nmlCanvasTrig1.js"></script>
</head>
<body>
<p>
Before an objectified canvas.
</p>
<canvas id="myCanvas"
width="300" height="300"
style="outline: 1px solid magenta;">
<p>Powered by HTML5 canvas</p>
</canvas>
<p>
After …
</p>
</body>
</html>
'use strict';
/**
* The great keystroke saver
*/
var $ = function (foo) {
return document.getElementById(foo);
}
/**
* Canvas object definition
*/
var Canvas = function(canvasId, color) {
this.canvas = $(canvasId);
this.context = this.canvas.getContext('2d');
this.color = color;
this.prep();
}
Canvas.prototype.prep = function() {
this.context.fillStyle = this.color;
this.context.fillRect(0,
0,
this.canvas.width,
this.canvas.height);
}
Canvas.prototype.clear = function() {
this.context.clearRect(0,
0,
this.canvas.width,
this.canvas.height);
}
Canvas.prototype.getContext = function () {
return this.context;
}
Canvas.prototype.getHeight = function () {
return this.canvas.height;
}
Canvas.prototype.getWidth = function () {
return this.canvas.width;
}
/*globals document, window */
'use strict';
/*
* nmlCanvasTrig1.js
*/
var kadima = function() {
// create canvas object
var canvas = new Canvas('myCanvas', 'yellow');
draw(canvas);
}
var draw = function (bar) {
var ctx = bar.getContext();
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', kadima);