1. Graphics
Canvas

2. Introduction
Canvas is a HTML element that we can control using JavaScript to create graphics
Graphics ranging from texts, graphs, pictures, or animations
Relatively new technology but all major browsers support it now

3. Syntax <canvas id=’myCanvas’ height=’100px’ width=’100px’>
Anything missing from the syntax above?
Height and width attributes are optional and default to 150px and 300px respectively

4. No browser support <canvas id=’yourCanvas’>
Include elements to be displayed in case browser does not support canvas or if the agent is a textual browser
<canvas id=’yourCanvas’>
<!-- Valid HTML/Text here--->
</canvas>
This means the canvas closing tag is required
Why?

5. Rendering Context 2D / 3D / Image processing
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’|’webgl’|’bitmaprenderer’);
The rendering context object is what is used to draw graphics

6. Shapes & Paths <canvas> only supports a single shape, Rectangle
fillRect(x,y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)
How do you draw other shapes?

7. Rectangle Example function draw(){ }
var canvas = document.getElementById('cnvs');
var context = canvas.getContext('2d');
context.fillRect(25, 25, 100, 100);
context.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50); }

8. Rect. example
Output:

9. Paths
Series of points connected by a line (straight, curved, stroke, filled, any line)
Steps:
Create a path
beginPath()
Draw into the path
Stroke or fill
Stroke()
fill()

10. Path to a Triangle What you’ll need:
moveTo(x,y): This moves the pen(cursor) to the coordinates (x,y)
lineTo(x,y): Draws a line from the current location to the coordinates (x,y)
fill()/stroke(): Stroke for outline or fill for coloured path
fill() automatically closes path while stroke does not. You must call clostPath() before calling stroke()

11. Triangle Example
function draw() {
var canvas = document.getElementById('canvas') ;
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Filled triangle
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(105, 25);
ctx.lineTo(25, 105);
ctx.fill();
// Stroked triangle
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke(); }

12. Triangle Output
Output:

13. Drawing Text We can draw text using the following:
fillText(text, x, y [,maxWidth])
strokeText(text, x, y [,maxWidth])

14. Text Example function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = '48px serif';
ctx.fillText('Hello world', 10, 50); }

15. Text Output
Output:

16. Colours
Use fillStyle property of the context object to specify colour.
The following all set the colour to orange
ctx.fillStyle = 'orange';
ctx.fillStyle = '#FFA500';
ctx.fillStyle = 'rgb(255, 165, 0)';
ctx.fillStyle = 'rgba(255, 165, 0, 1)';

17. Example function draw() {
var ctx = document.getElementById('canvas').getContext ('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.fillStyle = 'rgb(' + Math.floor( * i) + ', ' +
Math.floor( * j) + ', 0)';
ctx.fillRect(j * 25, i * 25, 25, 25); }

18. Output
Output: