Graphics Canvas

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

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

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?

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

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?

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); }

Rect. example Output:

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()

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()

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(); }

Triangle Output Output:

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

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

Text Output Output:

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)';

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(255 - 42.5 * i) + ', ' + Math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillRect(j * 25, i * 25, 25, 25); }

Output Output: