Example 1:
create a basic rectangle

View SourceCode NextStep

Global variables:

              var canvasDiv="viewport"; //canvas div name
              var canvasContext; //canvas 2D context:
              var canvasObject; //canvas dom element
              var renderObject; //render class
            

Get canvas Object and initalize the space


      canvasContext=document.getElementById(canvasDiv).getContext("2d");
      cuadObject=new Shape();
      renderObject=new RenderHandler(canvasContext);
      canvasObject=document.getElementById(canvasDiv);
      renderObject.setViewWidth(canvasObject.width);
      renderObject.setViewHeight(canvasObject.height);


            

Create rectangle and add the elemento to the render scene:

      cuadObject.createRectangle(canvasObject.width/2-50,canvasObject.height/2-50,100,100);
      renderObject.addRenderElement(cuadObject);
            

Execute render function

      function render()
      {
        renderObject.drawRenderElements(renderObject);
      }
      setInterval(render,10);