html canvas resolution issue with overlaying boxes

I have noticed issues with drawing one box over another. As requested, here is the code, but in greater detail

function draw(x,y,w,h,c){
 ctx.fillStyle=c;
 ctx.strokeStyle=c;
 ctx.lineWidth=1;
 ctx.globalAlpha=1.0;
 ctx.fillRect(x,y,w,h);
}

function Rectangle(x,y,w,h,c){
 this.x=x;
 this.y=y;
 this.w=w;
 this.h=h;
 this.c=c;
 this.draw=draw;

 this.onMouseEnter=function(){
  this.c='rgb(0,0,0)';   //black
  this.draw();
 }

this.onMouseLeave=function(){
 this.c='rgb(开发者_StackOverflow中文版255,255,255)';   //white
 this.draw();
 }
}
box=new Rectangle(10,10,110,110,'rgb(255,255,255)');  //black box at

At rest the box is white, but on hover, it turns black. However, there is still a white border. I am pretty sure this is not a calculation error on my part as I am changing the color, not the dimensions. I have also noticed this problem occurring in most of my other onHover functions.

Why does HTML have these problems with drawing over other objects.

Thanks

This can often happen if you're creating the rect with non-int values. See http://jsfiddle.net/cwolves/9tZTy/

If you change the numbers to non-integers (e.g. 25.5), you'll see that the box has a red "glow" around it when you click on the canvas.

Simple solution is to floor every value you pass to fillRect:

ctx.fillRect(x1 << 0, y1 << 0, x2 << 0, y2 << 0);

[edit]

Your example seems to be using ints, so if you still see the issue in my demo, call clearRect() first.