oCanvas, the object-based Canvas

This tutorial was originally published by the author on CodeProject.
Download Source Code
Live Demo


Introduction

oCanvas is a "JQuery like" library  created by Johannes Koggdal that facilitates the development of web applications that use the HTML5 Canvas element, allowing you to work directly with objects (rectangles, ellipses, imagems, etc..) instead of pixels. 

Among its features, we can highlight: 

  • Resources to create animations with a time-line module to start or stop these animations and define their durations; 
  • A module of events with support for mobile devices ("Touch"); 
  • Small library (15kb), well documented and extensible; 
  • Open source license (MIT). 

For better understanding, we can divide the library into 9 parts: 

  1. oCanvas Object: which represents the HTML5 Canvas element itself, where everything will be built. 
  2. Core: is the main instance which defines all other elements. 
  3. Display Objects: representing the main predefined geometrical elements (lines, triangles, rectangles, etc.). 
  4. Background: stores settings of object surface. 
  5. Canvas.Timeline: facilitates the creation of loops for moving objects. 
  6. Events: capturing the events that can occur with the keyboard, mouse, and touch. 
  7. Scenes: We can group objects into independent "frames". 
  8. Animation: Lets you create short animations for each object. 
  9. Draw: Module that allows you to clean or repaint the scenes. 

A typical oCanvas application performs the following operations: 

  1. Creating the Canvas (the creation of the HTML element is required); 
  2. Setting the background; 
  3. Creation of scenes; 
  4. Creating objects; 
  5. Definition of the loop and small animations; 
  6. Capture events. 

To illustrate the use of the library, will build a small example, the classic "bouncing ball":  We will move one square bouncing on the sides of the screen while it rotates about its own center. Clicking (or tapping) at any position of the canvas, the square will change position.

Background 

You need to reference the library that is available here.

Using the Code

First, let's create HTML5 page (index.html) with canvas size of 640 x 480:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <title>oCanvas</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.8.1/ocanvas.min.js"></script>
    <script type="text/javascript" src="ocanvas_example.js"></script>
  </head>
  <body onload="createAnim()">
    <h2>oCanvas Library Example</h2>
    <p>Click/Tap on the canvas to change the position of the object</p>
    <canvas id="canvas" width="640" height="480" style="border:1px solid #000000;" >
    </canvas>
    <a href="http://www.html-apps.info/site/index.php/html-web-menu-blog/9-web-html-apps-blog/4-html-web-apps-ocanvas-object">More Info</a>
  </body>
</html>


Now let's create our Javascript file (ocanvas_example.js) as follows:

[code]function createAnim() {
 
  //Block 1
  var scene = oCanvas.create({
    canvas: "#canvas",
    background: "#ccc"
  });
 
  //Block 2
  var square = scene.display.rectangle({
    x: 25,
    y: 25,
    width: 20,
    height: 20, 
    fill: "#0aa",
    velocX: 5,
    velocY: 5
  });
  scene.addChild(square);

  //Block 3
   
  scene.bind("click tap", function() {
    square.x = scene.mouse.x;
    square.y = scene.mouse.y;
  });

  //Block 4
  scene.setLoop(function() {
    square.move(square.velocX,square.velocY)
    square.rotation++;    
    if ((square.x <= 0) || (square.x >= (scene.width)))  
      square.velocX = -square.velocX;
    if ((square.y < 20) || (square.y > (scene.height - 20))) 
      square.velocY = -square.velocY;
  }).start();
 
}[/code]

 Our code is inside the function createAnim which is called in the LOAD event of the page. Let's study it:

  • In block 1, we created the screen object that represents the canvas and change its color to gray. 
  • In block 2, we created the square object and add it to the screen. Notice that we create 2 instance variables (velocX and VelocY) that will control the direction and speed of the square. 
  • In block 3, we capture the event "tap click" that will be triggered with a click or touch in any position of the screen. 
  • Finally, in the last block, we started the animation setLoop() where is the code that will make the square move and rotate on itself.

Conclusion

This is a simple example where we approached a small part of the resources of the library, but showing its power and ease of use.  See the working example here.

See you soon...