Touchstart and Touchend on Canvas

var canvas = document.getElementById('appArea');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
var shapelist = [];


var Square = function (x, y, size, ctx) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.ctx = ctx;
    this.selected = false;
    this.color = 'black';
}

Square.prototype.render = function() {
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.size, this.size);
    if (this.selected) {
        ctx.fillStyle = "green";
    } else  {
        ctx.fillStyle = this.color;
    }
    ctx.fill();

};


//Thinking on change object behaviour using an activated functionality
/*
Square.prototype.activated = function(color) {

};
*/


var generateSquares = function () {
    for (var i = 0; i < 3; i++) {
        var theX = i * 30;
        var theY = 20;
        var the Size = 10;
        var square = new Square(theX, theY, theSize, ctx);
        square.render();
        shapelist.push(square);
    };
}

var getCoords = function (x, y) {
    var validCoords = [];

    for(var index in shapelist){
        var shape = shapelist[index];
        var startX = shape.x;
        var endX = shape.x + shape.size;
        var startY = shape.y;
        var endY = shape.y + shape.size;

        if (x >= startX && x <= endX && y >= startY && y <= endY) {
            validCoords.push(shape);
        }
    }
    return validCoords;
} 


var startEvent = function(e) {
    var self = this;
    canvas.addEventListener('touchstart', function (e) {
        resetShapeSelection();
        var shapes = getCoords(e.offsetX, e.offsetY);
        console.log(shapes[shapes.length-1]);
        // if shapes exists from a touch event   
        if (shapes.length) {       
            var selectedShape = shapes[shapes.length-1];
            selectedShape.selected = true;
        }
        render();
    }, false);
}


function resetShapeSelection() {
   for(index in shapelist){
    var shape = shapelist[index];
       shape.selected=false;
   }
}


var render = function(){
    ctx.clearRect(0, 0, this.width, this.height);
    for(index in shapelist){
        shapelist[index].render();
    }
}

generateSquares();
startEvent();
render();