Javascript & Canvas

1. HTML

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

Canvas (1)

http://www.w3.org

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

Canvas (2)

w3schools.com

Which browsers does Canvas support?

Source : http://caniuse.com

Use canvas

<canvas id="game" width="600" height="350"></canvas>

2. Javascript

The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a <canvas> element.

Canvas context (1)

developer.mozilla.org

Canvas context (2)

var canvas = document.getElementById('game'); console.log(canvas); // <canvas id="game" width="800" height="350"></canvas>

var context = canvas.getContext("2d"); console.log(context); // CanvasRenderingContext2D

Canvas Coordinates

X

Y

[0, 0]

[300, 175]

[600, 350]

Styles

Fill Stroke

2.1 Drawing

Drawing rectangles

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.fillRect(0, 0, 100, 100); context.strokeRect(0, 0, 100, 100); // Parameters : x, y, width, height

Drawing lines

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.beginPath(); context.moveTo(0, 300); context.lineTo(200, 20); context.stroke(); context.closePath();

Drawing text

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.fillText("Hello world", 50, 100); context.strokeText("Hello world", 50, 150);

Drawing images

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

var logo = new Image(); logo.src = "images/player.png"; context.drawImage(logo, 100, 100);

Erasing

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.clearRect(10, 10, 100, 100);

2.2 Style

Colors (1)

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.fillStyle = "blue"; context.fillRect(0, 0, 100, 100);

context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);

Colors (2)

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.strokeStyle = "blue"; context.strokeRect(0, 0, 100, 100);

context.strokeStyle = "red"; context.strokeRect(100, 100, 100, 100);

Text

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

context.font = "30px Comic Sans Ms"; context.fillStyle = "green"; context.fillText("Hello!", 0, 30);

3 Animate

setInterval()

function sayHello(){ alert('Hello!'); }

setInterval(sayHello, 2000);

setInterval(function(){ alert('Hello!'); }, 2000);

Animation loop

var canvas = document.getElementById('game'); var context = canvas.getContext("2d");

var x = 0; setInterval(animate, 1000/30);

function animate() { context.clearRect(0, 0, 800, 350); context.fillStyle = "green"; context.fillRect(x, 0, 100, 100); x += 1; }

Merci pour votre attention.