Html Canvas Drawing Shows Through

I'm sure this question has been asked before I just can't find an answer to it yet. I want to erase part of a black rectangle by drawing another, white rectangle on top, but a lot

Solution 1:

At first I thought it's because the box isn't black at all, instead it looks gray and with a little bit of alpha. So, after some googling I found this: Why isn't rectangle black in HTML 5 canvas?

basically, you draw you rectangle with a 1px wide border on a round pixel number, this means that the browser tries to draw on a half pixel. You should set the position to something .5 in order to avoid this problem:

http://jsfiddle.net/VdGa6/2/

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
// context.globalAlpha = 1;  // this is the default so it's not needed
// context.globalCompositeOperation = 'source-over';  // this is the default so it's not needed
context.strokeStyle = 'rgba(0,0,0,1)';
context.strokeRect(10.5,20.5,20,30);
context.strokeStyle = 'rgba(250,250,250,1)';
context.strokeRect(20.5,20.5,10,30);