Basics of HTML Canvas

13/02/2017

Material taken from http://www.w3schools.com

CSCU9B2

CSCU9B2 1

We are going to cover

• What HTML canvas is, and what it can do • Most commonly used canvas methods • Example of a simple animated application

CSCU9B2 2

1 13/02/2017

What is Canvas?

Canvas is a medium for oil painting, typically stretched across a wooden frame.

What is HTML Canvas?

• HTML canvas is about drawing graphics • There is a set of JavaScript methods (APIs) for drawing graphics (lines, boxes, circles, shapes). • HTML canvas is a rectangular area on a web page, specified with the

CSCU9B2 4

2 13/02/2017

What can HTML canvas do?

• Draw colorful text • Draw graphical shapes • Can be animated. Everything is possible: from simple bouncing balls to complex animations • Can be interactive and respond to events • Offer lots of possibilities for HTML gaming applications

CSCU9B2 5

Examples

http://www.effectgames.com/demos/canvascycle/ http://hakim.se/experiments/html5/blob/03/

http://bomomo.com/

http://hakim.se/experiments/html5/magnetic/02/

http://worldsbiggestpacman.com/

CSCU9B2 6

3 13/02/2017

Canvas element

Looks like this:

• Must have an id attribute so it can be referred to by JavaScript; • The width and height attribute is necessary to define the size of the canvas.

CSCU9B2 7

Drawing on the Canvas

All drawing on the HTML canvas must be done with JavaScript in three steps: 1. Find the canvas element 2. Create a drawing object 3. Draw on the canvas E.g. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75);

CSCU9B2 8

4 13/02/2017

HTML Canvas Coordinates

• The HTML canvas is two-dimensional. • The upper-left corner of the canvas has the coordinates (0,0) • In the previous example, you saw the method: fillRect(0,0,150,75) • This means: Start at the upper-left corner (0,0) and draw a 150 x 75 pixels rectangle.

CSCU9B2 9

Canvas – fillStyle and strokeStyle

• The fillStyle property is used to define a fill-color (or gradient) for the drawing. • The strokeStyle defines the color of the line around the drawing. • E.g. ctx.fillRect(20,20,150,50); ctx.fillStyle="#FF0000"; ctx.strokeRect(20,20,200,100); ctx.strokeStyle = “blue”;

CSCU9B2 10

5 13/02/2017

Canvas - Gradients

• Gradients can be used to fill rectangles, circles, lines, text, etc. • Two different types of gradient: • createLinearGradient(x,y,x1,y1) • createRadialGradient(x,y,r,x1,y1,r1) • http://www.w3schools.com/css/css3_gradients.asp • Need to specify two or more color "stops“ • Eg start and finish colours • To use the gradient, set the fillStyle or strokeStyle property to the gradient

CSCU9B2 11

Example of linear gradient

Create a linear gradient. Fill rectangle with the gradient:

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

// Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(25,25,150,75);

CSCU9B2 12

6 13/02/2017

Draw a Line

To draw a straight line on a canvas, you use these methods:

– moveTo(x,y) defines the starting point of the line

– lineTo(x,y) defines the ending point of the line

– stroke() method draws the line E.g. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

CSCU9B2 13

Draw a Circle

To draw a circle on a canvas, you use the following methods:

– beginPath();

– arc(x,y,r,start,stop) Eg. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

CSCU9B2 14

7 13/02/2017

Drawing Text on the Canvas

To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text textAlign – Aligns the text. Possible values: start, end, left, right, center strokeText(text,x,y) - Draws text on the canvas fillText(text,x,y) - Draws "filled" text on the canvas

E.g., Write the text in orange with a blue border around the text ctx.font = "italic bold 56px Arial, sans-serif"; ctx.fillStyle="orange"; ctx.textAlign = "start"; ctx.fillText("Some text", 10, 50); ctx.lineWidth = 3; ctx.strokeStyle="blue"; ctx.strokeText("Some text", 10, 50); CSCU9B2 15

Canvas Images

To draw an image on a canvas, use the following method:

– drawImage(image,x,y,w,h) E.g. var myimage = new Image(); myimage.src = "image2.jpeg"; ctx.drawImage(myimage, 20, 20, 100, 100);

CSCU9B2 16

8 13/02/2017

Animation – Changing things over time

Animation on a canvas is achieved by:

1. Defining drawing operations in a function a) Clear the canvas b) Draw objects slightly differently from previous time, e.g. location, size, rotation 2. Call function repeatedly at a defined time interval

setInterval(animate, 30);

CSCU9B2 17

A simple animation - example

CSCU9B2 18

9 13/02/2017

Animation using CSS

• Animations can be created with CSS • Let an element gradually change styles • Color, position or any other property • Transitions • Key frames • Style values at a particular time point • Timing

CSCU9B2 19

CSS Transitions - example

Some text.

CSCU9B2 20

10 13/02/2017

CSS Keyframes - example

CSCU9B2 21

Web Technologies

The End…

CSCU9B2 22