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
8. The CanvasRenderingContext2D interface provides the 2D
rendering context for the drawing surface of a <canvas> element.
Canvas context (1)
developer.mozilla.org
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);