CanvasOOP (v2)

Revision 2 of this benchmark created on


Preparation HTML

<canvas id="canvas" width="100" height="100" style="margin: 0 auto; border: 1px solid black; width: 100px; height: 100px;">
</canvas>

Test runner

Ready to run.

Testing in
TestOps/sec
non-prototype
var rectangle = function(width, height, bgColor, x, y) {
    //private
    var width = width;
    var height = height;
    var bgColor = bgColor;
    var x = x;
    var y = y;
    //public
    this.setWidth = function(newWidth) {
      width = newWidth;
    }
    this.getWidth = function() {
      return width;
    }

    this.setHeight = function(newHeight) {
      height = newHeight;
    }
    this.getHeight = function() {
      return height;
    }

    this.setBgColor = function(newBgColor) {
      bgColor = bgColor;
    }
    this.getBgColor = function() {
      return bgColor;
    }
    this.setX = function(newX) {
      x = newX;
    }
    this.getX = function() {
      return x;
    }
    this.setY = function(newY) {
      y = newY;
    }
    this.getY = function() {
      return y;
    }

    this.draw = function(canvas) {
      canvas.fillStyle = bgColor;
      canvas.fillRect(x, y, width, height);
    }


    }
    
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectStore = [];

for (y = 0; y < 100; y++) {

  for (x = 0; x < 100; x++) {
    objectStore[y, x] = new rectangle(1, 1, '#000', x, y);
    objectStore[y, x].draw(context);
  }
}
ready
prototype
var rectangle = (function() {
  var width;
  var height;
  var bgColor;
  var x;
  var y;

  function rectangle(width, height, bgColor, x, y) {
    this.__width = width;
    this.__height = height;
    this.__bgColor = bgColor;
    this.__x = x;
    this.__y = y;
  }

  rectangle.prototype.setWidth = function(newWidth) {
    this.__width = newWidth;
  }
  rectangle.prototype.getWidth = function() {
    return this.__width;
  }

  rectangle.prototype.setHeight = function(newHeight) {
    this.__height = newWidth;
  }
  rectangle.prototype.getHeight = function() {
    return this.__height;
  }

  rectangle.prototype.setbgColor = function(newBgColor) {
    this.__bgColor = newBgColor;
  }
  rectangle.prototype.getBgColor = function() {
    return this.__bgColor;
  }

  rectangle.prototype.setX = function(newX) {
    this.__x = newX;
  }
  rectangle.prototype.getX = function() {
    return this.__x;
  }
  rectangle.prototype.setY = function(newY) {
    this.__y = newY;
  }
  rectangle.prototype.getY = function() {
    return this.__y;
  }
  rectangle.prototype.draw = function(canvas) {
    canvas.fillStyle = this.getBgColor();
    canvas.fillRect(this.getX(), this.getY(), this.getWidth(), this.getHeight());
  }



  return rectangle;
})();

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectStore = [];

for (y = 0; y < 100; y++) {

  for (x = 0; x < 100; x++) {
    objectStore[y, x] = new rectangle(1, 1, '#000', x, y);
    objectStore[y, x].draw(context);
  }
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.