HTML5:Canvas

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <
Icon Objective.png

Objective

By the end of this page you will be able to:

  • Create some simple shapes and animate them using JavaScript and HTML5 Canvas

HTML5 and the <canvas> element

Create a basic Rectangle

The <canvas> element is part of HTML5. It allows, in combination with scripting (usually JavaScript), the ability to draw dynamic shapes and images. It can be used for drawing graphs, animating images and game creation. (The <canvas> element was first introduced by Apple and used with the Mac OS X dashboard).

The <canvas> element has two attributes only, height and width. These attributes can be set inline or via CSS. When no height or width attributes are specified, the <canvas> will default to a size of 300px wide and 150px high. You can also specify an id as well as applying other styles such as margins and borders.

The basic code for specifying the canvas area of 200px x 200px is:

<canvas id="myId" width="200" height="200"></canvas>

Canvas only supports one shape - rectangles. All other shapes must be creating by defining paths, which allow creation of simple and complex shapes. The position of shapes is defined by their x and y coordinates, the upper most left hand side of the canvas element being the 0,0 position.

There are three functions that draw rectangles:

fillRect(x, y, w, h) //creates a solid filled rectangle
strokeRect(x, y, w, h) //creates a rectangle outline only
clearRect(x, y, w, h) //clears an area by making it fully transparent

The following example uses fillRect and strokeRect inside a createShape() function to draw an outlined rectangle inside the canvas and specify the fill colour. The shape is drawn 10px in on the x axis, 10 down on the y axis and the width and height are equal at 100px each. The stroke outline sits at exactly the same place. Copy and paste the code into a text editor and view in an HTML5 supported browser. Change around the coordinates and size of both the shape and the stroke as well as the fill color to see how it all works.


<html>
 <head>
  <script type="application/javascript">
    function createShape() {
      var canvas = document.getElementById("myId");
      if (canvas.getContext) {
        var context = canvas.getContext("2d");
 
        context.fillStyle = "rgb(0,155,155)"; //defines the fill color
        context.fillRect (10, 10, 100, 100); // defines the fill coordinates x, y, width and height
        context.strokeRect (10, 10, 100, 100); // defines stroke x, y, width and height
 
 
             }
    }
  </script>
 </head>
 <body onload="createShape();">
   <canvas id="myId" width="200" height="200"></canvas>
 </body>
</html>

Using Paths to Create Complex Shapes

Lines and Circles

Paths allow you to draw shapes (other than rectangles). Firstly you draw an outline, then choose to stroke and fill as necessary. To start drawing the path, use beginPath(), then draw the path that makes up your shape using lines and curves. once complete, fill and stroke if desired, then call closePath() to complete.

The following example creates a shape combining lines and a circle.

<html>
 <head>
  <script type="application/javascript">
    function createShape() {
      var canvas = document.getElementById("myId");
      if (canvas.getContext) {
        var context = canvas.getContext("2d");
 
        context.fillStyle = "rgb(0,155,155)"; // defines the fill color or use #990011 etc
        context.strokeStyle = "rgb(0,155,155)";
        context.lineWidth = 4;
 
        context.beginPath(); // start drawing
        context.moveTo(10, 10);// starting subpath at the given x, y point
        context.lineTo(100, 100);// adds the current x, y point to the subpath and connects with a straight line         
        context.stroke();// strokes the current subpath with the current strokeStyle
        context.fill(); // fills the current paths with the fillStyle
        context.closePath();//marks the current subpath as closed 
 
        context.moveTo(150, 150); // set the start point
        context.arc(150, 150, 40, 0, 360, false); //x, y, radius, start angle, end angle, anticlockwise
        context.stroke();
        context.fill();
        context.closePath();
 
        }
    }
 </script>
 </head>
 <body onload="createShape();">
   <canvas id="myId" width="200" height="200"></canvas>
 </body>
</html>


Sd hottipicon.png HOT TIP! Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: var radians = (Math.PI/180)*degrees.

And this is what it looks like in an HTML5 ready browser

Sd filledshape.png

Bezier and Quadratic Curves

Animating Shapes

now the fun part...coming soon :)

Resources

HTML5 Canvas - The Basics [1]

Icon References.png References

  1. Sugan, M. (2009). HTML 5 Canvas - The Basics, retrieved 11 September 2010, from http://dev.opera.com/articles/view/html-5-canvas-the-basics/

 

Day, S. (2010). HTML5:Canvas. Retrieved December 17, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML5%3ACanvas