1. Canvas in HTML5
Framgia Company
Name: Vũ Đăng Tùng
Date: 20/07/2013

2. Summary
 Introduction HTML5
 Canvas in HTML5
 Using Canvas 2D API with Game
 Demo

3. Introduction HTML5
 HTML (HyperText Markup Language)
 Version :
 1991 HTML
 1994 HTML 2
 1996 CSS 1 + JavaScript
 1997 HTML 4
 1998 CSS 2
 2000 XHTML 1
 2002 Tableless Web Design
 2005 AJAX
 2009 HTML 5

4. What new ?
 Html5 based on Development HTML,
CSS, DOM, and Javascripts.
 HTML5 ~=Html + Js + Css
 New Tags: <aside> , <article>, <section>, <hgroup>..
http://slides.html5rocks.com/#semantic-tags-2
 Play audio , video.
 Using <canvas> with 2D graphic
 Support Local Storage

5. Canvas in HTML5
 Canvas is new element in html5 and is
useful in web based graphics.
 Html5 define <canvas> as a resolution-
dependent bitmap .
 Use <canvas id=“”>…</canvas>
 Use for rendering graph
 Game graphics
 Visual images

6. Support
 Internet Explorer 7 and 8 require the third-party
explorercanvas library. Internet Explorer 9 supports
<canvas> natively.
http://diveintohtml5.info/canvas.html

7. Canvas basic
<canvas id=“c” width=“800” height=“600”></canvas>
…..
var canvas = document.getElementById("c"),
context = canvas.getContext("2d");
Draw & Painting Line
Method : context.lineTo(), context.moveTo()..
Draw & Painting Shapes
Method : context.fillStyle = 'blue'; context.fillRect(10, 20, 200, 100);
Draw & Painting ovals, circle
Method : context.arc()…
http://www.html5canvastutorials.com/

8. Canvas 2D API
 In the Canvas 2D API, image data is stored in an object with 3
attributes imageData is width, height and data. In that data is
a one-dimensional array containing the pixel. Each pixel
contains 4 corresponding elements R, G, B, A.

9. Canvas 2D API
 Some method process image :
 imagedata = context.createImageData(imagedata)
 imagedata = context.getImageData(sx, sy, sw, sh)
 context . putImageData(imagedata, dx, dy [, dirtyX,
dirtyY, dirtyWidth, dirtyHeight ])
Get ordinate :
e.pageX, e.pageY, e.offsetLeft , e.offsetRight

10. Canvas with Game more games
 Move object in game :
~ draw new object + delete old object with
Interval.
setInterval(method draw and delete , interval)
Example:
context.clearRect(0,0,canvas.width,canvas.height);
object.draw(context);

11. Demo

12. THANKS FOR LISTENINGTHANKS FOR LISTENING