Using the Canvas API within HTML5

A canvas API (Application Programming Interface) provides a means of drawing on a page via script. It is important to note that the canvas is bitmap-based and not vectored like the SVG format. Once a line, shape, or color is placed, there is no "going back" without rewriting the script and starting again.

It should also be noted that, unlike inline SVG, text within the canvas object is not searchable.

Calling the canvas object

Placing a canvas object is as easy as writing a line of simple markup:


          <canvas id="myCanvas" height="200" width="560"></canvas>

Set an "id" attribute to use as a reference, plus "height" and "width" attributes to define the size of the canvas.

To activate and make use of the canvas, script (usually JavaScript) is used to reference the canvas object:


     window.onload = function () {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
    }

Once you have created an object and set its context, you can use css and script to determine the appearance of your image:


<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./html5/html5static.css" />
    <style>
      article{ width:80%; margin:auto; }
      section{ width:100%; } 
      #myCanvas { border: 4px double #9C9898; width:100%; height:200px; }
    </style>
    <script type="text/javascript">
      function line(cont,can) {
      // butt line cap (top line)
       cont.beginPath();
       cont.moveTo(200, can.height / 2 - 50);
       cont.lineTo(can.width - 200, can.height / 2 - 50);
       cont.lineWidth = 20;
       cont.strokeStyle = "#0000ff";
       cont.lineCap = "round";
       cont.stroke();
     }

     function arc(cont,can) {
       var x = can.width / 2;
       var y = can.height / 2;
       var radius = 75;
       var startAngle = 1.1 * Math.PI;
       var endAngle = 1.9 * Math.PI;
       var counterClockwise = false;

       cont.beginPath();
       cont.arc(x, y, radius, startAngle, endAngle, counterClockwise);
       cont.lineWidth = 15;
       // line color
       cont.strokeStyle = "#ababff";
       cont.stroke();
     }

     function quad(cont) {
       cont.beginPath();
       cont.moveTo(188, 150);
       cont.quadraticCurveTo(288, 0, 388, 150);
       cont.lineWidth = 10;
       // line color
       cont.strokeStyle = "#ffabab";
       cont.stroke();
     }

     function bez(cont) {
       cont.beginPath();
       cont.moveTo(188, 130);
       cont.bezierCurveTo(140, 10, 388, 10, 388, 170);
       cont.lineWidth = 10;
       // line color
       cont.strokeStyle = "#ff0000";
       cont.stroke();
     }

     function path(cont) {
       cont.beginPath();
       cont.moveTo(100, 20);

       // line 1
       cont.lineTo(200, 160);

       // quadratic curve
       cont.quadraticCurveTo(230, 200, 250, 120);

       // bezier curve
       cont.bezierCurveTo(290, -40, 300, 200, 400, 150);

       // line 2
       cont.lineTo(500, 90);

       cont.lineWidth = 5;
       cont.strokeStyle = "#ffffab";
       cont.stroke();
     }

     function path2(cont){
       var rectWidth = 200;
       var rectHeight = 100;
       var rectX = 189;
       var rectY = 50;
       var cornerRadius = 50;

       cont.beginPath();
       cont.moveTo(rectX, rectY);
       cont.lineTo(rectX + rectWidth - cornerRadius, rectY);
       cont.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
       cont.lineTo(rectX + rectWidth, rectY + rectHeight);
       cont.lineWidth = 5;
       cont.strokeStyle = "#00ffab";
       cont.stroke();
     }

     function shape(cont){
     // begin custom shape
       cont.beginPath();
       cont.moveTo(170, 80);
       cont.bezierCurveTo(130, 100, 130, 150, 230, 150);
       cont.bezierCurveTo(250, 180, 320, 180, 340, 150);
       cont.bezierCurveTo(420, 150, 420, 120, 390, 100);
       cont.bezierCurveTo(430, 40, 370, 30, 340, 50);
       cont.bezierCurveTo(320, 5, 250, 20, 250, 50);
       cont.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
       cont.closePath();
       cont.lineWidth = 5;
       cont.strokeStyle = "green";
       cont.stroke();
     }

     function text(cont){
       var x = 40;
       var y = 110;
       cont.font = "60pt bahamas";
       cont.lineWidth = 3;
     // stroke color
       cont.strokeStyle = "blue";
       cont.fillStyle = "#00ffff";
       cont.strokeText("The Canvas API", x, y);
     }

     window.onload = function () {
         var canvas = document.getElementById("myCanvas");
         var context = canvas.getContext("2d");
         line(context,canvas);
         arc(context, canvas);
         quad(context);
         bez(context);
         path(context);
         path2(context);
         shape(context);
         text(context);
     };
    </script>
  </head>
  <body>
    <article>
      <section>
        <canvas id="myCanvas" height="200" width="560"></canvas>
      </section>
    <article>
  </body>
</html>

Edited by Eric Sherman (MMI)

Prev — || — Next

Section Widget

HTML5 and Canvas

Using the Canvas API within HTML5

Calling the canvas object

Recent Articles