Download to read offline
Uploaded byApostolos Syropoulos
The HTML5 Canvas Element
This document is a presentation about the HTML5 Canvas element. It begins with an introduction to the Canvas element and why it is important. It then provides a simple example to draw shapes on a canvas. Next, it discusses using video elements on a canvas by showing a video playback on canvas. It concludes with a brief example of animating objects on a canvas by tracking mouse movement.
More Related Content
Similar to The HTML5 Canvas Element
More from Apostolos Syropoulos
The HTML5 Canvas Element
- 1. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why this all this fuss?
- 4. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis 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 Whatis 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 Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Checking for support
- 11. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simplest Example
- 15. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
- 17. The HTML5 Canvas Element Syropoulos Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
- 18. The HTML5 Canvas Element Syropoulos Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The <video> element revisited
- 19. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A <video> over a <canvas>
- 24. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple animation with JavaScript
- 27. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Libraries
- 30. The HTML5 Canvas Element Syropoulos Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Animation Libraries https://www.createjs.com/easeljs
- 31. The HTML5 Canvas Element Syropoulos Whatis 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 Whatis the Canvas Element? Simple Example Playing with Videos Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale Thank you very much for your attention!