HTML5 brought us a great leap forward in
HTML5. Among other things we got a series of new elements lifting
our capabilities into a modern era by giving room for native
HTML5 where we used to have to apply plugins. They are
canvas, audio, and
video. This section is about the
canvas element.
The canvas element allows us as developers to
generate and manipulate bitmap graphics on the fly.
Let me show you a couple of very simple examples for a start.
First the HTML5:
<!doctype html>
<html language="en">
<!-- nmlCanvas0.html -->
<head>
<meta charset="utf-8"/>
<title>Canvas Example I</title>
<script type='module' src="nmlCanvas0.js"></script>
</head>
<body>
<h1>Canvas Example I</h1>
<p>
First example step in a gentle intro.
Three basic shapes on one canvas.
</p>
<canvas id="myCanvas"
width="300" height="300"
style="outline: 1px solid magenta;">
<p>Powered by &html; canvas</p>
</canvas>
</body>
</html>
'use strict';
import {$} from './nQuery.js';
/*
* nmlCanvas0.js
* function drawing a polygon
*/
let threeShapes = function () {
let canvas = $('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#088"; // fill color to 088
ctx.fillRect(20, 10, 120, 40); // fill rectangle
ctx.beginPath(); // begin new path
ctx.arc(150, 150, 50, 0, Math.PI * 2, true);
// describe arc
ctx.strokeStyle = 'red'; // stroke color
ctx.fillStyle = '#cc0'; // set fill color
ctx.fill(); // fill the path
ctx.stroke(); // draw circumference
ctx.lineWidth = 2; // stroke weight
ctx.strokeStyle = 'blue'; // stroke color
ctx.strokeRect(250, 250, 40, 40); // draw rectangle
}
}
window.addEventListener('load', threeShapes);
First the HTML5:
<!doctype html>
<html language="en">
<!-- nmlCanvas1.html -->
<head>
<meta charset="utf-8"/>
<title>Canvas Example II</title>
<script type='module' src="nmlCanvas1.js"></script>
</head>
<body>
<h1>Canvas Example II</h1>
<p>
Second example step in a gentle intro.
Let us try a polygon.
</p>
<canvas id="myCanvas" width="300" height="300"
style="outline: 1px solid magenta;">
<p>Powered by &html; canvas</p>
</canvas>
</body>
</html>
'use strict';
import {$} from './nQuery.js';
/*
* nmlCanvas1.js
* function drawing a polygon
*/
let poly = function () {
let canvas = $('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath(); // new path
ctx.moveTo(50, 200); // goto coordinate in canvas
ctx.lineTo(150, 50); // line to coordinate
ctx.lineTo(180, 150); // another line to coord
ctx.fillStyle = 'silver';
ctx.strokeStyle = 'black';
ctx.lineWidth = 10;
ctx.fill(); // fills poly
ctx.stroke(); // draws lines
}
}
window.addEventListener('load', poly);
First the HTML5:
<!doctype html>
<html language="en">
<!-- adactio110.html -->
<head>
<meta charset="utf-8"/>
<title>Shopping List</title>
<link href="adactio30.css" rel="stylesheet"/>
<script type='module' src="./adactio110.js"></script>
</head>
<body>
<h1>Canvas Example</h1>
<p>
Third step in a gentle intro.
</p>
<canvas id="myCanvas" width="140" height="60"
style="outline: 1px solid magenta;">
<p>Powered by &html;5 canvas</p>
</canvas>
<footer>
<button>Draw</button>
<button>DrawA</button>
<button>Wipe</button>
</footer>
</body>
</html>
'use strict';
import {$} from './nQuery.js';
/*
* adactio110.js
*/
export const draw = function () {
let canvas = $('myCanvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(130.0, 42.0);
ctx.bezierCurveTo(130.0, 46.4, 126.4, 50.0, 122.0, 50.0);
ctx.lineTo(18.0, 50.0);
ctx.bezierCurveTo(13.6, 50.0, 10.0, 46.4, 10.0, 42.0);
ctx.lineTo(10.0, 18.0);
ctx.bezierCurveTo(10.0, 13.6, 13.6, 10.0, 18.0, 10.0);
ctx.lineTo(122.0, 10.0);
ctx.bezierCurveTo(126.4, 10.0, 130.0, 13.6, 130.0, 18.0);
ctx.lineTo(130.0, 42.0);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 1.0;
ctx.strokeStyle = 'white';
ctx.stroke();
}
}
export const drawA = function () {
let canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(13, 10);
ctx.arcTo(130, 10, 130, 50, 6);
ctx.arcTo(130, 50, 10, 50, 6);
ctx.arcTo(10, 50, 10, 10, 6);
ctx.arcTo(10, 10, 130, 10, 6);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 1.0;
ctx.strokeStyle = 'white';
ctx.stroke();
}
}
export const wipe = function () {
let canvas = $('myCanvas');
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
let cvs = 'myCanvas';
window.addEventListener('load', function() {
let btns = document.getElementsByTagName('button');
btns[0].addEventListener('click', draw);
btns[1].addEventListener('click', drawA);
btns[2].addEventListener('click', wipe);
});