<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Canvas Example Trig</title> <script src="nmlObjCanvas.js"></script> <script src="nmlObjCS.js"></script> <script src="nmlCanvasTrig2.js"></script> </head> <body> <p> Before the canvas with a coordinate system. </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'; /** * Defines a coordinate system * with origo at canvas coordinates ox,oy */ var CoordinateSystem = function (ox, oy) { this.x = ox; this.y = oy; } CoordinateSystem.prototype.draw = function (bar) { var ctx = bar.getContext(); ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.moveTo(10, this.y); ctx.lineTo(bar.getWidth() - 10, this.y); ctx.moveTo(this.x, 10); ctx.lineTo(this.x, bar.getHeight() - 10); ctx.stroke(); ctx.closePath(); }
'use strict'; /* * nmlCanvasTrig2.js */ var nochal = function() { // create canvas object var canvas = new Canvas('myCanvas', 'yellow'); draw(canvas); } var draw = function (bar) { var cs = new CoordinateSystem(100,100); cs.draw(bar); } window.addEventListener('load', nochal);