Designing a mouse using javascript and css

I felt like testing some stuff with javascript and html 5 canvas, they seemed really exciting to me. The first thing I have created is a very basic paint, you can only place squares and set the color, width, and height of the squares. When you mouse over the canvas I would like for it to show a "preview" of what shape you will be placing, the closest I have came is this:

elem.addEventListener('mousemove', function(event) 
{
    var x = event.pageX - elemLeft, y = event.pageY - elemTop;

    // Render elements.
    elements.forEach(function(element) 
    {
        //Listen for controls.
        var brushHeight = document.getElementById('brushHeight').value;
        var brushWidth = document.getElementById('brushWidth').value;
        var brushColor = document.getElementById('brushColor').value;
        context.fillStyle = brushColor;
        context.fillRect(x, y, brushWidth, brushHeight);
    });
    // Add element.
    elements.push(
    {
        colour: brushColor,
        width: brushWidth,
        height: brushHeight,
    });
}, false);

But there are several problems with this, I couldn't figure out how to delete the "preview" without deleting things underneath (shapes placed before) so it just kind of draws lines infinitely. Is there any possible way to just make this code the cursor itself? If not does anyone have any ideas of how I can fix the code above to be what I want it to be?

I had trouble putting this into words, any other information you need please just ask!

Here's the fiddle: http://jsfiddle.net/35wqJ/1/