Hover not working

by Static_Cloud

HTML

<div class='canvas'>
  <canvas id='mainCanvas' width='500' height='300'></canvas>
</div>
<p id='click'>0 | 0</p>
<p id='hover'>No</p>
<p id='inventory'></p>
<p id='display'></p>

JavaScript

var canvas = document.getElementById('mainCanvas');
var ctx = canvas.getContext('2d');
var status = document.getElementById('status');
var click = document.getElementById('click');
var hover = document.getElementById('hover');
var inv = document.getElementById('inventory');
var display = document.getElementById('display');

canvas.style.backgroundColor = 'red';

var mouseX;
var mouseY;

var item1 = new item('Rock', ctx);
item1.drawItem(50, 50);
var item2 = new item('Paper', ctx);
item2.drawItem(150, 200);
var item3 = new item('Scissors', ctx);
item3.drawItem(200, 250);

var items = [item1, item2, item3];
var inventory = [];

canvas.addEventListener('mousemove', mouseMoveHandler, false);
canvas.addEventListener('click', mouseClickHandler, false);

function mouseMoveHandler(event) {
  mouseX = event.clientX - canvas.getBoundingClientRect().left;
  mouseY = event.clientY - canvas.getBoundingClientRect().top;
  for (var i = 0; i < items.length; i++) {
  	if (mouseX > items[i].x & mouseY > items[i].y &
  		mouseX < items[i].x + items[i].width & mouseY < items[i].y + items[i].height) {
  		hover.innerHTML = items[i].name;
      break;
  	} else {
  		hover.innerHTML = 'No';
  	}
  }
}

function mouseClickHandler(event) {
  click.innerHTML = mouseX + ' | ' + mouseY;
}

function item(name, ctx) {
  this.x = undefined;
  this.y = undefined;
  this.width = 50;
  this.height = 50;
  this.name = name;

  this.drawItem = function(x, y) {
    ctx.fillRect(this.x = x, this.y = y, this.width, this.height);
  }

  this.removeItem = function() {
    ctx.clearRect(this.x, this.y, this.width, this.height);
  }
}