Canvas app. Simple api for creating and drawing on canvas.

canvasApp.js

var CvsApp = function (selector) {
   this.el = document.querySelector(selector);
   this.ctx = this.el.getContext('2d');
   this.shapes = [];
   this.Shape = function (x,y) {
      this.path = new Path2D();
      this.coords = { x:x, y:y};
      this.size = {h:'', w:''};
   };
   this.addShape = function (shape) {
      shape.ctx = this.ctx;
      this.shapes.push(shape);      
      
   };
   this.drawMethods = {
      circle: function (x,y, size) {
         this.ctx.arc(100, 35, 25, 0, 2 * Math.PI);
      }
   };
   this.draw = function () {
     var _this = myApp;
     myApp.ctx.clearRect(0,0,myApp.el.width,myApp.el.height); // clear canvas
      myApp.ctx.save();
      myApp.shapes.forEach(function (shape) {
       shape.coords.x = shape.coords.x+1;
       shape.draw();
     });
    window.requestAnimationFrame(myApp.draw);
   };
   this.init = function () {
     this.draw();
   }
};
var myApp = new CvsApp('#canvas');

    var rectangle = new myApp.Shape(100,140);
    rectangle.path.moveTo(100, 140);
    rectangle.draw = function () {
    this.path.rect(this.coords.x, this.coords.y, 50, 50);

       this.ctx.stroke(this.path);
    }

    var rect = new myApp.Shape(200,300);

    rect.draw = function () {
    rect.path.rect(this.coords.x, this.coords.y, 50, 50);
      this.coords.y = this.coords.y - 2;
      this.ctx.fill(this.path);
    }

myApp.addShape(rectangle);
myApp.addShape(rect);
myApp.init();