Space Block code

spaceblock.js

var canvasBg = document.getElementById("canvasBg"),
	ctxBg = canvasBg.getContext("2d"),
	canvasEntities = document.getElementById("canvasEntities"),
	ctxEntities = canvasEntities.getContext("2d"),
	canvasWidth = canvasBg.width,
	canvasHeight = canvasBg.height,
	background = new Background(0, 0),
	spaceship = new Spaceship(0, canvasHeight/2),
	alienShip = new AlienShip(100, 0),
	alienShip2 = new AlienShip(300, 500),
	alienShip3 = new AlienShip(500, 0),
	requestAnimFrame = window.requestAnimationFrame ||
					   window.webkitRequestAnimationFrame ||
					   window.mozRequestAnimationFrame ||
					   window.oRequestAnimationFrame ||
					   window.msRequestAnimationFrame ||
					   function(callback) {
					   	window.setTimeout(callback, 1000 / 60);
					   },
	imgSprite = new Image(),
	imgSprite2 = new Image(),
	imgSprite3 = new Image();
imgSprite.src = "images/Background.png";
imgSprite.addEventListener("load", init, false); //3 zoom ins
imgSprite2.src = "images/Spaceship.png";
imgSprite2.addEventListener("load", init, false);
imgSprite3.src = "images/Alien Ship2.png";
imgSprite3.addEventListener("load", init, false);

var score = document.getElementsByClassName("score")[0];
score.style.position = "absolute";
score.style.height = 30;
score.style.width = 30;
score.style.fontsize = "30em";
score.style.top = "3%";
score.style.left = "14.5%";
score.style.background = "blue";

var scoreValue = 1;

function updateScore() {
	score.innerHTML = scoreValue;
	if(scoreValue > 0) {
		scoreValue += 1;
	} else {
		scoreValue = 0;
	}
}

function init() {
	document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
	document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
	begin();
}

function begin() {
	isPlaying = true;
	requestAnimFrame(loop);
}

function update() {
	clearCtx(ctxBg);
	clearCtx(ctxEntities);
	spaceship.update();
	alienShip.update();
	alienShip2.update();
	alienShip3.update();
}

function draw() {
	background.draw();
	spaceship.draw();
	alienShip.draw();
	alienShip2.draw();
	alienShip3.draw();
}

function loop() {
	if (isPlaying) {
		update();
		draw();
		requestAnimFrame(loop);
	}
}

function clearCtx(ctx) {
	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}

function Background(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = canvasHeight;
	this.width = canvasWidth;
}

Background.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite, this.drawX, this.drawY, canvasWidth, canvasHeight);
}

function Spaceship(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 175;
	this.width = 175;
	this.isMovingRight = false;
	this.isMovingLeft = false;
}

Spaceship.prototype.update = function() {
	if(this.isMovingRight) {
		this.drawX += 2;
		if(this.drawX >= canvasWidth - 100) {
			this.drawX = canvasWidth;
			alert("You've made it past the aliens!");
			location.reload(true);
		}
	}
	if(this.isMovingLeft) {
		this.drawX -= 2;
		if(this.drawX <= 0) {
			this.drawX = 0;
		}
	}
	if(collision(alienShip, spaceship)) {
		console.log(collision);
		updateScore();
	}
	if(collision(alienShip2, spaceship)) {
		console.log(collision);
		updateScore();
	}
	if(collision(alienShip3, spaceship)) {
		console.log(collision);
		updateScore();
	}
}

Spaceship.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, 175, 175);
}

function AlienShip(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 125;
	this.width = 125;
	this.isMovingUp = false;
	this.isMovingDown = true;
}

AlienShip.prototype.update = function() {
	if(this.drawY <= 0) {
		this.drawY = 0;
		this.isMovingDown = true;
		this.isMovingUp = false;
	}
	if(this.drawY >= 500 && this.isMovingDown) {
		this.drawY = 500;
		this.isMovingUp = true;
		this.isMovingDown = false;
	}
	if(this.isMovingDown) {
		this.drawY += randomRange(1, 6);
	}
	if(this.isMovingUp) {
		this.drawY -= randomRange(3, 6);
	}
}

AlienShip.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, 125, 125);
}

function randomRange (min, max) {
	return Math.floor(Math.random() * (max + 1 - min)) + min;
}

function checkKey(e, value) {
	var keyID = e.keyCode || e.which;
	if(keyID === 39) {
		spaceship.isMovingRight = value;
		e.preventDefault();
	}
	if(keyID === 37) {
		spaceship.isMovingLeft = value;
		e.preventDefault();
	}
}

function collision(a, b) {
	return a.drawX <= b.drawX + b.width &&
		a.drawX >= b.drawX &&
		a.drawY <= b.drawY + b.height &&
		a.drawY >= b.drawY;
}

This is my variant I will post a diff as well @LessWig

https://gist.github.com/ninjapanzer/a60991559d7b5da88421

This is the bulk of the changes I made to your code

The important parts to look at are at the bottom. I renamed the collision method because it only works if the object is overlapping when the top left is inside the target container. To fix this we have to check both combinations of object ship vs alien and then alien vs ship. If either are collisions then it will report it.

As for why the collisions kept firing. You were augmenting your collision check with the height and width of the entity in question but the height was not the same as the draw size thus the collision box was bigger than the object in some cases I assume. This could be that your mages were smaller than the box you drew them into this the box is colliding even if the image was not.

diff --git a/spaceblock.js b/spaceblock.js
index ffb5fde..e3f702d 100644
--- a/spaceblock.js
+++ b/spaceblock.js
@@ -101,8 +101,8 @@ Background.prototype.draw = function() {
 function Spaceship(x, y) {
    this.drawX = x;
    this.drawY = y;
-   this.height = 175;
-   this.width = 175;
+   this.height = 50;
+   this.width = 50;
    this.isMovingRight = false;
    this.isMovingLeft = false;
 }
@@ -110,7 +110,7 @@ function Spaceship(x, y) {
 Spaceship.prototype.update = function() {
    if(this.isMovingRight) {
        this.drawX += 2;
-       if(this.drawX >= canvasWidth - 100) {
+       if(this.drawX >= canvasWidth - this.width) {
            this.drawX = canvasWidth;
            alert("You've made it past the aliens!");
            location.reload(true);
@@ -122,22 +122,22 @@ Spaceship.prototype.update = function() {
            this.drawX = 0;
        }
    }
 Spaceship.prototype.draw = function() {
-   ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, 175, 175);
+   ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, this.width, this.height);
 }

 function AlienShip(x, y) {
@@ -155,8 +155,8 @@ AlienShip.prototype.update = function() {
        this.isMovingDown = true;
        this.isMovingUp = false;
    }
-   if(this.drawY >= 500 && this.isMovingDown) {
-       this.drawY = 500;
+   if(this.drawY >= canvasHeight - this.height && this.isMovingDown) {
+       this.drawY = canvasHeight - this.height;
        this.isMovingUp = true;
        this.isMovingDown = false;
    }
@@ -169,7 +169,7 @@ AlienShip.prototype.update = function() {
 }

 AlienShip.prototype.draw = function() {
-   ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, 125, 125);
+   ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, this.height, this.width);
 }

 function randomRange (min, max) {
@@ -188,9 +188,13 @@ function checkKey(e, value) {
    }
 }

-function collision(a, b) {
+function testCollision(a, b){
    return a.drawX <= b.drawX + b.width &&
        a.drawX >= b.drawX &&
        a.drawY <= b.drawY + b.height &&
        a.drawY >= b.drawY;
-}
\ No newline at end of file
+}
+
+function collision(a, b) {
+   return testCollision(a, b) || testCollision(b, a)
+}

Just for sake of testing I resized all the entities. These are not required changes I just wanted to make it easier for them to not overlap for a while.

Okay! Thank you very much! @ninjapanzer