An introductiomn to the HTML5 <canvas> element

1. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The HTML5 Canvas Element
Apostolos Syropoulos
Xanthi, Greece
asyropoulos@yahoo.com
The Canvas Element for members of the
Erasmus+ founded project GAMES

2. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Presentation Outline
1 What is the Canvas Element?
2 Drawing on a Canvas
3 Animation
4 Finale

3. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?

4. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!

5. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!
Canvas has many applications: interactive movies, games, charts,
diagrams, etc.

6. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!
Canvas has many applications: interactive movies, games, charts,
diagrams, etc.
One can create whole sites with canvas but this is something
most people do not recommend.

7. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!
Canvas has many applications: interactive movies, games, charts,
diagrams, etc.
One can create whole sites with canvas but this is something
most people do not recommend.
There is no need to use Flash and Action Script anymore!

8. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!
Canvas has many applications: interactive movies, games, charts,
diagrams, etc.
One can create whole sites with canvas but this is something
most people do not recommend.
There is no need to use Flash and Action Script anymore!
Canvas is free as it is natively supported by all major browsers!

9. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why all this fuss?
The canvas element together with the audio and video elements
are the things that make HTML5 shine!
Canvas has many applications: interactive movies, games, charts,
diagrams, etc.
One can create whole sites with canvas but this is something
most people do not recommend.
There is no need to use Flash and Action Script anymore!
Canvas is free as it is natively supported by all major browsers!
Canvas is for 2D graphics for 3D graphics we need WebGL:
http://arodic.github.io/p/jellyfish/

10. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defining a Canvas

11. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defining a Canvas
The canvas element can be introduced as follows:

12. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defining a Canvas
The canvas element can be introduced as follows:
<canvas id="canvas" width="400" height="400">
Your browser doesn't support "canvas".
</canvas>

13. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defining a Canvas
The canvas element can be introduced as follows:
<canvas id="canvas" width="400" height="400">
Your browser doesn't support "canvas".
</canvas>
This canvas occupies an area of 400 × 400 pxs.

14. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Defining a Canvas
The canvas element can be introduced as follows:
<canvas id="canvas" width="400" height="400">
Your browser doesn't support "canvas".
</canvas>
This canvas occupies an area of 400 × 400 pxs.
The text appears if the element is not supported…

15. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is a Path?

16. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is a Path?
Path: A curve that consists of line segments.

17. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is a Path?
Path: A curve that consists of line segments.
A path starts with ctx.beginPath() and moves the invisible
cursor at (0, 0).

18. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is a Path?
Path: A curve that consists of line segments.
A path starts with ctx.beginPath() and moves the invisible
cursor at (0, 0).
The coordinate system of the canvas element:
(𝑥min = 0, 𝑦min = 0)
•
(𝑥max, 𝑦max)
•

19. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths

20. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);

21. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);
ctx.lineTo(x,y) draws a line from the current point to
(x, y);

22. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);
ctx.lineTo(x,y) draws a line from the current point to
(x, y);
ctx.closePath() draws a line from the current point to first
point of the path;

23. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);
ctx.lineTo(x,y) draws a line from the current point to
(x, y);
ctx.closePath() draws a line from the current point to first
point of the path;
ctx.fillStyle and ctx.strokeStyle are used to specify
the fill and stroke color;

24. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);
ctx.lineTo(x,y) draws a line from the current point to
(x, y);
ctx.closePath() draws a line from the current point to first
point of the path;
ctx.fillStyle and ctx.strokeStyle are used to specify
the fill and stroke color;
ctx.lineWidth can be used to set the line width; and

25. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
ctx.moveTo(x,y) moves the cursor at (x, y);
ctx.lineTo(x,y) draws a line from the current point to
(x, y);
ctx.closePath() draws a line from the current point to first
point of the path;
ctx.fillStyle and ctx.strokeStyle are used to specify
the fill and stroke color;
ctx.lineWidth can be used to set the line width; and
ctx.fill() and ctx.stroke() fill and draw the path.

26. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple Example: Path Drawing

27. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple Example: Path Drawing
. . . . . . . . .
<canvas id="canvas1" width="200" height="200">
</canvas>
<script>
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.beginPath()
ctx.moveTo(100,10); ctx.lineTo(150,140);
ctx.lineTo(60,110); ctx.closePath();
ctx.fillStyle = 'lime'; ctx.strokeStyle = 'purple';
ctx.lineWidth = 4; ctx.fill(); ctx.stroke();
</script>
unu . . . . . . . . .

28. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Output of the Example

29. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Output of the Example

30. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The Code in Detail

31. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The Code in Detail
<canvas id="canvas1" width="200" height="200">
Your browser doesn't support "canvas".</canvas>
<script><!-- Declare the canvas -->
var can = document.getElementById('canvas1');
// Get access to the canvas
var ctx = can.getContext('2d');
// supported contexts 2d, webgl, webgl2, etc.
ctx.beginPath() // Start path
ctx.moveTo(100,10); ctx.lineTo(150,140);
ctx.lineTo(60,110); ctx.closePath();
// Path finished. Draw and fill it.
ctx.fillStyle = 'lime'; ctx.strokeStyle = 'purple';
ctx.lineWidth = 4; ctx.fill(); ctx.stroke();

32. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths

33. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”

34. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”
strokeRect(x, y, width, height) Draws a rectangle
with black ink or the color ink specified with strokeStyle.

35. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”
strokeRect(x, y, width, height) Draws a rectangle
with black ink or the color ink specified with strokeStyle.
clearRect(x, y, width, height) Clears the specified
rectangular area, making it fully transparent.

36. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”
strokeRect(x, y, width, height) Draws a rectangle
with black ink or the color ink specified with strokeStyle.
clearRect(x, y, width, height) Clears the specified
rectangular area, making it fully transparent.
rect(x, y, width, height) Adds a rectangular path to a
currently open path. The top-left corner of the rectangular path is
at (x, y) and has width and height.

37. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”
strokeRect(x, y, width, height) Draws a rectangle
with black ink or the color ink specified with strokeStyle.
clearRect(x, y, width, height) Clears the specified
rectangular area, making it fully transparent.
rect(x, y, width, height) Adds a rectangular path to a
currently open path. The top-left corner of the rectangular path is
at (x, y) and has width and height.
arc(x, y, r, θ, φ, a) Draws an arc which is centered at
(x, y) with radius equal to r starting at θ and ending at φ going
in the clockwise direction if a==true.

38. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
More on Paths
fillRect(x, y, width, height) Fills a rectangular area
with black or some color “ink.”
strokeRect(x, y, width, height) Draws a rectangle
with black ink or the color ink specified with strokeStyle.
clearRect(x, y, width, height) Clears the specified
rectangular area, making it fully transparent.
rect(x, y, width, height) Adds a rectangular path to a
currently open path. The top-left corner of the rectangular path is
at (x, y) and has width and height.
arc(x, y, r, θ, φ, a) Draws an arc which is centered at
(x, y) with radius equal to r starting at θ and ending at φ going
in the clockwise direction if a==true.
arcTo(x1, y1, x2, y2, r) Draws an arc with the given
control points and radius, connected to the previous point by a
straight line.

39. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?

40. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.

41. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.

42. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.

43. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.

44. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.

45. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background,

46. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background, draw object,

47. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background, draw object, wait a bit,

48. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background, draw object, wait a bit, clear
scene,

49. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background, draw object, wait a bit, clear
scene, and redraw background and object in a new position.

50. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
What is Animation?
Roughly, animation is the production of moving cartoon pictures.
The easiest way to create an animation is by making a flipbook
animation.
In HTML5 we can create animations with CSS or JavaScript.
CSS animation is useful to create visual effects that can make very
attractive a web page.
JavaScript animation demands programming but one create very
interesting things including games.
Animation recipe: Draw background, draw object, wait a bit, clear
scene, and redraw background and object in a new position.
Repeat.

51. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate

52. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.

53. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).

54. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).
At the end of the function it is necessary to have the following
call:
requestAnimationFrame(animFun);

55. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).
At the end of the function it is necessary to have the following
call:
requestAnimationFrame(animFun);
The first thing that should be done is to clear the drawing area.

56. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).
At the end of the function it is necessary to have the following
call:
requestAnimationFrame(animFun);
The first thing that should be done is to clear the drawing area.
How can we do it?

57. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).
At the end of the function it is necessary to have the following
call:
requestAnimationFrame(animFun);
The first thing that should be done is to clear the drawing area.
How can we do it?
Next we draw what should appear in the first frame and use
variables that control the motion.

58. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to Animate
The call requestAnimationFrame(animFun); starts an
animation that is described in function animFun.
Function animFun describes what should happen at each
animation step (i.e., what goes in each animation frame).
At the end of the function it is necessary to have the following
call:
requestAnimationFrame(animFun);
The first thing that should be done is to clear the drawing area.
How can we do it?
Next we draw what should appear in the first frame and use
variables that control the motion.
The values of these variables change only once in the function,
but since the function is executed repeatedly they change
continuously.

59. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A Bouncing Ball

60. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A Bouncing Ball
var x = 200, y = 20, value = 5, sign = 1;
requestAnimationFrame(animateFunction);
function animateFunction() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x,y,20,0,2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
y += value*sign;
if (y == 380 ) {
sign = -1
} else if ( y == 20 ) {
sign = 1
}
requestAnimationFrame(animateFunction);
}

61. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How it Looks Like

62. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How it Looks Like

63. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Controling the Ball

64. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Controling the Ball
How can we create this web page?

65. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Controling the Ball
How can we create this web page?

66. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
First We Add the Buttons

67. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
First We Add the Buttons
Buttons can be added using the button element:

68. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
First We Add the Buttons
Buttons can be added using the button element:
<button id="start">start</button>
<button id="stop">stop</button>

69. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
First We Add the Buttons
Buttons can be added using the button element:
<button id="start">start</button>
<button id="stop">stop</button>
We have to use #start and #stop to refer to these buttons.

70. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Next We Add Two New Functions

71. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Next We Add Two New Functions
First a new variable and two new functions.

72. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Next We Add Two New Functions
First a new variable and two new functions.
var requestId;
function start() {
if (!requestId) {
requestId =
window.requestAnimationFrame(animateFunction);
}
}
function stop() {
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = undefined;
}
}

73. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And Finally We Add the Event Handlers

74. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And Finally We Add the Event Handlers
Replace the call to requestAnimationFrame with a call to
start() and add the following event handlers:

75. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And Finally We Add the Event Handlers
Replace the call to requestAnimationFrame with a call to
start() and add the following event handlers:
document.querySelector("#start").
addEventListener('click',
function() {start(); });
document.querySelector("#stop").
addEventListener('click',
function() {stop(); });

76. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And Finally We Add the Event Handlers
Replace the call to requestAnimationFrame with a call to
start() and add the following event handlers:
document.querySelector("#start").
addEventListener('click',
function() {start(); });
document.querySelector("#stop").
addEventListener('click',
function() {stop(); });
NB querySelector is used to refer to HTML elements.

77. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And Finally We Add the Event Handlers
Replace the call to requestAnimationFrame with a call to
start() and add the following event handlers:
document.querySelector("#start").
addEventListener('click',
function() {start(); });
document.querySelector("#stop").
addEventListener('click',
function() {stop(); });
NB querySelector is used to refer to HTML elements.
That’s all.

78. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Use a Real Ball

79. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Use a Real Ball
How can we replace the circle with the image of a ball?

80. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Here are the Gory Details

81. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Here are the Gory Details
First we define an object to load the image

82. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Here are the Gory Details
First we define an object to load the image
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, x, y); }, false);
img.src = "./ball.png";

83. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Here are the Gory Details
First we define an object to load the image
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, x, y); }, false);
img.src = "./ball.png";
Instead of drawing a circle, we draw an image.

84. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Here are the Gory Details
First we define an object to load the image
var img = new Image();
img.addEventListener('load', function() {
ctx.drawImage(img, x, y); }, false);
img.src = "./ball.png";
Instead of drawing a circle, we draw an image.
ctx.drawImage(img, x, y);

85. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Take Control of the Ball

86. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Take Control of the Ball
What does this mean?

87. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Take Control of the Ball
What does this mean?
We should be able to move the ball with the arrow keys only.
Pressing any other key should have no effect.

88. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Take Control of the Ball
What does this mean?
We should be able to move the ball with the arrow keys only.
Pressing any other key should have no effect.
The ball should not move beyond the canvas boundaries.

89. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to allow the use of arrows

90. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to allow the use of arrows
First we define five new variables:

91. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to allow the use of arrows
First we define five new variables:
var dir; // the current direction
var activeKey = 0; // the code of the key pressed
var dx = 0, dy = 0;
var speed = 100; // pixels per second

92. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to allow the use of arrows
First we define five new variables:
var dir; // the current direction
var activeKey = 0; // the code of the key pressed
var dx = 0, dy = 0;
var speed = 100; // pixels per second
Let’s see what we should do when a key is pressed:

93. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
How to allow the use of arrows
First we define five new variables:
var dir; // the current direction
var activeKey = 0; // the code of the key pressed
var dx = 0, dy = 0;
var speed = 100; // pixels per second
Let’s see what we should do when a key is pressed:
document.addEventListener('keydown', function(e) {
if (activeKey == e.keyCode) return;
activeKey = e.keyCode; // avoid checking the same key
if (e.keyCode == 37) {//left
dx = -1; // move to the left
dir = 'l';
}
. . . . . . . . . . . . . . .
}

94. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
This is not enough!

95. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
This is not enough!
When we release a key, the ball does not stop!

96. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
This is not enough!
When we release a key, the ball does not stop!
Here is how we can solve this problem:

97. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
This is not enough!
When we release a key, the ball does not stop!
Here is how we can solve this problem:
document.addEventListener('keyup', function(e) {
switch (e.keyCode) {
case 37: // left
case 39: // right
dx = 0;
break;
case 38: // up
case 40: // down
dy = 0;
break; }
activeKey = 0;
});

98. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Update the Animation Loop

99. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Update the Animation Loop
Clear the drawing area and calculate the new position:

100. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Update the Animation Loop
Clear the drawing area and calculate the new position:
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 400, 400);
var xnew = x + dx / 60 * speed;
var ynew = y + dy / 60 * speed;

101. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Update the Animation Loop
Clear the drawing area and calculate the new position:
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 400, 400);
var xnew = x + dx / 60 * speed;
var ynew = y + dy / 60 * speed;
Let’s check the boundary conditions:
if (dir == 'l') {// or 't', 'r', 'b'
if (xnew >= 0) {// 0 for 't' and 360 for 'b' and 'l'
x = xnew// y=ynew for 't' and 'b', same for 'r'
}
else if (xnew < 0) {
x = 0
}
}

102. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s Update the Animation Loop
Clear the drawing area and calculate the new position:
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 400, 400);
var xnew = x + dx / 60 * speed;
var ynew = y + dy / 60 * speed;
Let’s check the boundary conditions:
if (dir == 'l') {// or 't', 'r', 'b'
if (xnew >= 0) {// 0 for 't' and 360 for 'b' and 'l'
x = xnew// y=ynew for 't' and 'b', same for 'r'
}
else if (xnew < 0) {
x = 0
}
}
That’s all!

103. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s make games!

104. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s make games!
Now we have the basic knowldge to makes games like this one:

105. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Let’s make games!
Now we have the basic knowldge to makes games like this one:

106. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale

107. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
We learned:

108. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
We learned:
What is the canvas element.

109. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
We learned:
What is the canvas element.
How to use it to draw shapes.

110. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
We learned:
What is the canvas element.
How to use it to draw shapes.
And how to create animations.

111. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
We learned:
What is the canvas element.
How to use it to draw shapes.
And how to create animations.
Thank you very much for your attention!