Open Technical Blog: HTML5 Canvas

This script shows how to draw simple graphics with Canvas in HTML5. The following techniques are adopted:

Canvas for graphics.
Draw lines.
Draw rectangles.
Draw circles.
Draw text.

Output

When the file is viewed in a browser such as Chrome or Firefox, it appears as below.

Source Code

<!DOCTYPE HTML>
<html>
  <head>
 <style>
      body {
        margin: 10px;
        padding: 10px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        //text
        context.font = "bold 24pt Sans-Serif";
        context.fillStyle = '#000000';
        context.fillText("Can you see me?", 20, 40);
        
        //lines
        context.beginPath();
        context.moveTo(50,200);
        context.lineTo(200,70);
        context.lineTo(400,100);
        context.lineWidth = 15;
        context.strokeStyle = "#0000cc";
        //context.lineCap = "butt"; //default
        //context.lineCap = "square";
        context.lineCap = "round";
        context.lineJoin = "miter"; //default
        //context.lineJoin = "round";
        //context.lineJoin = "bevel";
        context.stroke();

        //rectangles
        //context.rect(x,y,width,height)
        context.beginPath();
        context.rect(150, 120, 200, 150);
        context.fillStyle = '#11ccff';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

        //circles
        //context.arc(x, y, radius, 0 , 2 * Math.PI, false);
        context.beginPath();
        context.arc(350, 300, 50, 0 , 2 * Math.PI, false);
        context.fillStyle = '#11ffcc';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = 'black';
        context.stroke();

        //triangles
        context.beginPath();
        context.moveTo(100,250);
        context.lineTo(50,350);
        context.lineTo(200,400);
        context.closePath();
        context.fillStyle = '#cc11ff';
        context.fill();
        context.lineWidth = 4;
        context.strokeStyle = 'black';
        context.stroke();
        
        //grid
        context.beginPath();
        for(mi=0;mi<=400;mi+=50) {
          context.moveTo(mi,0);
          context.lineTo(mi,400);
          context.moveTo(0,mi);
          context.lineTo(400,mi);
        }
        context.lineWidth = 2;
        context.strokeStyle = "#cccccc";        
        context.lineWidth = 1;
        context.strokeStyle = "#cccccc";
        for(mi=0;mi<=400;mi+=10) {
          context.moveTo(mi,0);
          context.lineTo(mi,400);
          context.moveTo(0,mi);
          context.lineTo(400,mi);
        }
        context.stroke();
      };

    </script>
  </head>
  <body>
 This is a HTML5 Canvas Experiment.</br></br>
    <canvas id="myCanvas" width="600" height="500"></canvas></br></br>
 <b>References:</b>
    <ul>
<li><a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/">http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/</a></li>
<li><a href="http://www.tutorialspoint.com/html5/html5_canvas.htm">http://www.tutorialspoint.com/html5/html5_canvas.htm</a></li>
<li><a href="http://billmill.org/static/canvastutorial/move.html">http://billmill.org/static/canvastutorial/move.html</a></li>
<li><a href="http://www.w3schools.com/html5/html5_ref_canvas.asp">http://www.w3schools.com/html5/html5_ref_canvas.asp</a></li>
</ul>
</br>
  </body>
</html>

Open Technical Blog

Thursday, 13 September 2012

HTML5 Canvas - Simple Drawing

Output

Source Code

References

No comments:

Post a Comment