Javascript #10 : canvas

1. Javascript & Canvas

2. 1. HTML

3. 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

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

5. Which browsers does Canvas support?
Source : http://caniuse.com

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

7. 2. Javascript

8. The CanvasRenderingContext2D interface provides the 2D
rendering context for the drawing surface of a <canvas> element.
Canvas context (1)
developer.mozilla.org

9. 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

10. Canvas Coordinates
X
Y
[0, 0]
[300, 175]
[600, 350]

11. Styles
Fill Stroke

12. 2.1 Drawing

13. 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

14. 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();

15. Drawing text
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.fillText("Hello world", 50, 100);
context.strokeText("Hello world", 50, 150);

16. 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);

17. Erasing
var canvas = document.getElementById('game');
var context = canvas.getContext("2d");
context.clearRect(10, 10, 100, 100);

18. 2.2 Style

19. 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);

20. 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);

21. 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);

22. 3 Animate

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

24. 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;
}

25. Merci pour votre attention.