oCanvas, the object-based Canvas

José Cintra

4.00/5 (1 vote)

29 Jul 2014CPOL2 min read

11.7K

Small introduction about oCanvas library whose objective is to facilitate development with the HTML5 CANVAS element

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:

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

A typical oCanvas application performs the following operations:

Creating the Canvas (the creation of the HTML element is required);
Setting the background;
Creation of scenes;
Creating objects;
Definition of the loop and small animations;
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 (ocanvas_exemplo.html) with canvas size of 640 x 480:

HTML

<!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 type="text/javascript" src="/site/ocanvas-2.4.0.js"></script>
    <script type="text/javascript" src="/site/ocanvas_exemplo.js"></script>
  </head>
  <body onload="createAnim()">
    <h2>oCanvas Library Example</h2>
    <p>Click on the screen to change the position of the object</p>
    <canvas id="canvas"  width="640" height="480" style="border:1px solid #000000;" >
    </canvas>
  </body>
</html>

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

JavaScript

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

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

  //Block 4
  tela.setLoop(function() {
    quadrado.x += quadrado.velocX;
    quadrado.y += quadrado.velocY;
    quadrado.rotation++;    
    if ((quadrado.x <= 0) || (quadrado.x >= (tela.width)))  
      quadrado.velocX = -quadrado.velocX;
    if ((quadrado.y < 20) || (quadrado.y > (tela.height - 20))) 
      quadrado.velocY = -quadrado.velocY;
  }).start();
 
}

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.

Hope this helps. This is a translation of my original article in Portuguese. Questions and comments are welcome, including about misspellings.

See you soon...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)