Introduction to HTML5

<canvas>

Short plan

  • What is <canvas>?

  • Drawing

  • Text

  • Images

  • Animation

<canvas> overview

  • The HTML <canvas> element is used to draw graphics on a web page​​

  • The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

  • Canvas' methods for animations, offer a lot of possibilities for HTML gaming applications.

  • Canvas has great features for graphical data presentation with an imagery of graphs and charts.

<canvas> overview

  • Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations.

  • Canvas can respond to JavaScript events.

  • Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).

  • <canvas> is a bitmap system

short history

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component in 2004, powering applications like Dashboard widgets and the Safari browser. Later, in 2005 it was adopted in version 1.8 of Gecko browsers  and Opera in 2006 and then standardized by the Web Hypertext Application Technology Working Group (WHATWG) on new proposed specifications for next generation web technologies.

Browser Support

declarating
a <canvas> element

<canvas id="exampleCanvas" width="200" height="100">
  Your browser does not support canvas
</canvas>

connection <canvas> to script

<script>
  let canvasElement = document.getElementById("exampleCanvas");
  let context = canvasElement.getContext("2d");
</script>

Drawing

<canvas> coordinate space

Line drawing

context.moveTo(20,20);
context.lineTo(200,100);
context.stroke();

Rectangle drawing

context.fillStyle = "#000";
context.fillRect(20,20,150,75);

Arc and circle drawing

context.arc(50,50,40,0,2*Math.PI);
context.stroke();
arc(x-center, y-center, radius, startAngle, endAngle, anticlockwise)
context.arc(50,50,40,0,Math.PI);
context.fill();

Text

strokeText()

context.font = "50px Arial";
context.strokeText("Canvas",20,60);

fillText()

context.font = "50px Arial";
context.fillText("Canvas",20,60);

align text

context.textAlign = "center";
context.fillText("Canvas", canvasElement.width/2, canvasElement.height/2);

Images

drawImage(image, sx, sy, sWidth, sHeight,
          dx, dy, dWidth, dHeight)

Animations

Simple animation

<body>
  <canvas id="canvasID" width="300" height="300" style="border:2px solid blue;"></canvas>
  <script>
    var canvasElement = document.getElementById("canvasID");
    var context = canvasElement.getContext("2d");
    var image = new Image();
    image.onload = function() {
      setInterval(move, 100);
    };
    var x = 10;
    var y = 10;
    function move() {
      if (x < 200 && y < 200) {
        x += 5;
        y += 5;
      } else {
        x = 10;
        y = 10;
      }
      context.clearRect(0, 0, 
        canvasElement.width, canvasElement.height);
      context.drawImage(image, x, y, 80, 80);
    }
    image.src = "./smile.jpg";     
  </script>
</body>

Q&A

Made with Slides.com