Prototypical Inheritance Example

by Tomás Antunes

HTML

<canvas id="my_canvas"></canvas>

CSS

#my_canvas {
  border: 1px solid black;
}

JavaScript

function ClickableRectangle(x, y, w, h, c) {
	var x = x;
  var y = y;
	var w = w;
  var h = h;
  var canvas = c;
  var context = canvas.getContext('2d');
  
  this.draw = function(color) {
    context.fillStyle = color;
  	context.fillRect(x,y,w,h);
    canvas.addEventListener('click', this.clickHandler.bind(this));
  };
  
  this.clickHandler = function(e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;
    
    if(mouseX > x && mouseX < x + w &&
    	 mouseY > y && mouseY < y + h) {
    	   this.draw("#F00");
    } 	
  };
}

my_canvas.width = 400;
my_canvas.height = 300;


var rectangle1 = new ClickableRectangle(100, 100, 50, 50, my_canvas);
var rectangle2 = new ClickableRectangle(250, 150, 75, 50, my_canvas);

rectangle1.draw("#000");
rectangle2.draw("#000");