Basics of HTML Canvas

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

CSCU9B2

CSCU9B2 1

We are going to cover

• What is HTML canvas and what it can do

• Most commonly used canvas methods

• Example of a simple animated application

CSCU9B2 2

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 <canvas> element.

• The HTML <canvas> element (introduced in

HTML5) is a container for HTML graphics.

CSCU9B2 4

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/

CSCU9B2 6

Canvas element

Looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas>

• 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

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 this

method used:

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.

CSCU9B2 10

ctx.fillStyle="#FF0000";

ctx.strokeStyle = “blue”;

ctx.fillRect(20,20,150,50);

ctx.strokeRect(20,20,200,100);

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)

• 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 gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(0,0,150,80);

CSCU9B2 12

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

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

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 eg location, size, rotation

2. Call function repeatedly at a defined time interval

setInterval(animate, 30);

CSCU9B2 17

A simple animation - example

<canvas id="my_canvas" width="800" height="700">

<script>

var ctx = document.getElementById("my_canvas").getContext("2d"); var cW = ctx.canvas.width;var cH = ctx.canvas.height; var y = 0, x=0;

function animate(){

ctx.save();ctx.clearRect(0, 0, cW, cH); ctx.rotate(-0.3); ctx.fillStyle="green"; ctx.fillRect(0, y, 50, 50); y++;ctx.rotate(0.8); ctx.fillStyle=”red”; ctx.fillRect(x, 0, 50, 50); x++;ctx.restore();

}

var animateInterval = setInterval(animate, 30);ctx.canvas.addEventListener('click', function(event){ clearInterval(animateInterval);});

</script>

CSCU9B2 18

Animation using CSS

• Animations can be created with CSS

• Lets 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

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 300px;

height: 300px;

transform: rotate(180deg);

}

</style>

</head>

<body>

<div><p>Some text.</p></div>

</body>

</html>

CSCU9B2 20

CSS Keyframes - example

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

}

@keyframes example {

from {background-color: red; width: 100px;}

to {background-color: yellow; width: 200px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>CSCU9B2 21

Web Technologies

The End…

CSCU9B2 22