The Canvas Element for members of the Erasmus+ founded project GAMES

1. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Presentation Outline
1 What is the Canvas Element?
2 Simple Example
3 Playing with Videos
4 Finale

3. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this all this fuss?

4. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Why this 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?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Checking for support

11. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Checking for support
<canvas>
Your browser doesn't support "canvas".
</canvas>

12. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Checking for support
<canvas>
Your browser doesn't support "canvas".
</canvas>
The problem with this approach is that one cannot do anything if
the element is not supported!

13. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Checking for support
<canvas>
Your browser doesn't support "canvas".
</canvas>
The problem with this approach is that one cannot do anything if
the element is not supported!
However, we live in 2018 and all major browsers support this
element!

14. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simplest Example

15. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simplest Example
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head> <body>
<canvas id="canvas1" width="200" height="200">
Your browser doesn't support "canvas".</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></body></html>

16. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Output of the Example

17. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Output of the Example

18. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <video> element revisited

19. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <video> element revisited
One can embed videos in web pages as we already know.

20. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <video> element revisited
One can embed videos in web pages as we already know.
<video id="myVideo" width="720" height = "404">
<source src="sample-video.webm" type="video/webm">
<track src="sample-video.vtt" label="Greek
subtitles"
kind="subtitles" srclang="el" default></track>
</video>

21. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <video> element revisited
One can embed videos in web pages as we already know.
<video id="myVideo" width="720" height = "404">
<source src="sample-video.webm" type="video/webm">
<track src="sample-video.vtt" label="Greek
subtitles"
kind="subtitles" srclang="el" default></track>
</video>
This contains subtitles! And to make it autostart:

22. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The <video> element revisited
One can embed videos in web pages as we already know.
<video id="myVideo" width="720" height = "404">
<source src="sample-video.webm" type="video/webm">
<track src="sample-video.vtt" label="Greek
subtitles"
kind="subtitles" srclang="el" default></track>
</video>
This contains subtitles! And to make it autostart:
<script>
var video = document.getElementById("myVideo");
video.autoplay = true;
video.load();
</script>

23. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A <video> over a <canvas>

24. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A <video> over a <canvas>
When specifying a <video> element and a <canvas> element,
then the video is reproduced on the canvas.

25. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
A <video> over a <canvas>
When specifying a <video> element and a <canvas> element,
then the video is reproduced on the canvas.
Let us see an example.

26. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple animation with JavaScript

27. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple animation with JavaScript
A ball that follows the mouse.

28. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Simple animation with JavaScript
A ball that follows the mouse.
A bouncing ball.

29. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Animation Libraries

30. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Animation Libraries
https://www.createjs.com/easeljs

31. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Animation Libraries
https://www.createjs.com/easeljs
http://phaser.io/

32. The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Simple Example
Playing with
Videos
Finale
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Finale
Thank you very much for your attention!