Game Development
with the HTML5 Canvas API
Sebastian Piott – Edelweiss72 GmbH – Germany
Overview
A Brief History
Let's Get Started
Lines And Polygones
Curves And Circles
Images
Animations
Example: Parallax Background Animation
A BRIEF History
canvas
- dynamic, scriptable rendering of 2D shapes and bitmap images
- introduced in Safari 1.3 in 2004
- client-side JavaScript
- pixel-based
3D
Let's Get Started
Browser Support
Canvas Element
<canvas></canvas> <canvas width="500" height="500"></canvas> <canvas width="500" height="500">Your browser does not support the HTML5 Canvas API</canvas>http://jsbin.com/AwelacO/1/edit<canvas id="canvas" width="500" height="500"></canvas><script>var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');</script>
Lines and Polygones
Lines
beginPath()
moveTo(x, y)
lineTo(x, y)
fill()
stroke()
Polygon
fillRect(x, y, w, h)
strokeRect(x, y, w, h)
clearRect(x, y, w, h)
rect(x,y,w,h)
circles
Arc
arc(x, y, radius, startAngle, endAngle, counterclockwise)
arcTo(x1, y1, x2, y2, radius)
Images
Draw
drawImage()
3 arguments
drawImage(source, x, y)
5 arguments
drawImage(source, x, y, w, h)
9 arguments
drawImage(source, sourceX, sourceY,
sourceW, sourceH, x, y, w, h)
copy
-
from the same canvas
-
from a different canvas
-
from a <video> tag
Animation
Animation
setTimeout()
requestAnimationFrame()
Example:
Parallax Background Animation
(Example only optimised for Chrome)Slides Available Online
http://slid.es/sepiott/canvas-api/
Canvas API
By Sebastian Piott
Canvas API
Nowadays it is possible to develop browser games without the need of plugins like Flash. This talk will give you a brief history of the HTML5 Canvas API and how to use it. We will than dig deeper into the making of a browser game by building a game environment with a parallax effect in the background.