Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
The HTML5
Canvas Element
Syropoulos
What is the
Canvas Element?
Drawing on a
Canvas
Animation
Finale
.
.
.
.
.
.
.
.
.
.
....
Upcoming SlideShare
Loading in …5
×

Canvas for pupils

An introductiomn to the HTML5 <canvas> element

  • Be the first to comment

  • Be the first to like this

Canvas for pupils

  1. 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. 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. 3. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Why all this fuss?
  4. 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. 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. 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. 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. 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. 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. 10. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Defining a Canvas
  11. 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. 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. 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. 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. 15. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is a Path?
  16. 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. 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. 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. 19. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on Paths
  20. 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. 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. 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. 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. 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. 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. 26. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Simple Example: Path Drawing
  27. 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. 28. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
  29. 29. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Output of the Example
  30. 30. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Code in Detail
  31. 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. 32. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . More on Paths
  33. 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. 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. 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. 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. 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. 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. 39. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What is Animation?
  40. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 51. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How to Animate
  52. 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. 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. 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. 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. 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. 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. 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. 59. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A Bouncing Ball
  60. 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. 61. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How it Looks Like
  62. 62. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . How it Looks Like
  63. 63. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Controling the Ball
  64. 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. 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. 66. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . First We Add the Buttons
  67. 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. 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. 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. 70. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Next We Add Two New Functions
  71. 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. 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. 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. 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. 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. 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. 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. 78. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Use a Real Ball
  79. 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. 80. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Here are the Gory Details
  81. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 94. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . This is not enough!
  95. 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. 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. 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. 98. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s Update the Animation Loop
  99. 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. 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. 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. 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. 103. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Let’s make games!
  104. 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. 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. 106. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale
  107. 107. The HTML5 Canvas Element Syropoulos What is the Canvas Element? Drawing on a Canvas Animation Finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Finale We learned:
  108. 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. 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. 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. 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!

×