Javascript #10 : canvas

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 ﬂy.
Canvas (1)
http://www.w3.org

The HTML5 <canvas> tag is used to draw graphics, on the
ﬂy, 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>

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]

Drawing rectangles
context.ﬁllRect(0, 0, 100, 100);
context.strokeRect(0, 0, 100, 100);
// Parameters : x, y, width, height

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

Drawing text
context.ﬁllText("Hello world", 50, 100);
context.strokeText("Hello world", 50, 150);

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

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

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

Colors (2)
context.strokeStyle = "blue";
context.strokeStyle = "red";

Text
context.font = "30px Comic Sans Ms";
context.ﬁllStyle = "green";
context.ﬁllText("Hello!", 0, 30);

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

Animation loop
var x = 0;
setInterval(animate, 1000/30);
function animate()
{
context.clearRect(0, 0, 800, 350);
context.ﬁllStyle = "green";
context.ﬁllRect(x, 0, 100, 100);
x += 1;
}

Javascript #10 : canvas

More Related Content

What's hot

Viewers also liked

Similar to Javascript #10 : canvas

More from Jean Michel

Recently uploaded

Javascript #10 : canvas