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

http://docs.webplatform.org/wiki/webgl

Let's Get Started

Browser Support

https://code.google.com/p/explorercanvas/

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>

<canvas id="canvas" width="500" height="500"></canvas>
<script>    var canvas = document.getElementById('canvas'),        ctx    = canvas.getContext('2d');</script>

http://jsbin.com/AwelacO/1/edit

Lines and Polygones

Lines

beginPath()

moveTo(x, y)

lineTo(x, y)

fill()

stroke()

http://jsbin.com/AMoDiPe/1/edit

Polygon

fillRect(x, y, w, h)

strokeRect(x, y, w, h)

clearRect(x, y, w, h)

rect(x,y,w,h)

http://jsbin.com/UgofeYu/1/edit

circles

Arc

arc(x, y, radius, startAngle, endAngle, counterclockwise)

arcTo(x1, y1, x2, y2, radius)

http://jsbin.com/IVuPEwE/1/edit

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)

http://jsbin.com/eMajepI/1/edit

copy

from the same canvas
from a different canvas
from a <video> tag

http://jsbin.com/umolIRi/1/edit

Animation

setTimeout()

requestAnimationFrame()

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://jsbin.com/UCuloxa/1/edit

Example:

Parallax Background Animation

http://superseriousness.com/canvas/

(Example only optimised for Chrome)

Slides Available Online

http://slid.es/sepiott/canvas-api/