Untitled

<!DOCTYPE html>
<html>
<head> <title></title>
<style type="text/css">
body{ background:#CCC; }
#my_canvas{ background:#FFF; border:#999 1px solid; }
</style>
<script>
var x=50;
var y=50;

function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.canvas.addEventListener('mousedown', function(event) {
    var mX = event.clientX - ctx.canvas.offsetLeft;
    var mY = event.clientY - ctx.canvas.offsetTop;


    for(var i = 0; i < buildings.length; i++){
        var b = buildings[i];
            if(mX >= b.x && mX < b.x+b.w && mY >= b.y && mY < b.y+b.h){
                var b3 = b.id;
                document.getElementById('status').innerHTML = "You touched "+b3;
            }
    }
//  drawMagenta();
//  drawGreen();
//  drawOrange();

    alert(b3);
    var switchVar= b3;
    alert(switchVar);

    switch(switchVar.value) {
        case house:
            drawMagenta();
            break;
        case grocery:
            drawGreen();
            break;
        case post_office:
            drawOrange();
            break;
        default:
            ctx.clearRect(-600,-600,600,600);
    }

});

var buildings =[{"id":"house","x":100,"y":100,"w":50,"h":50,"bg":"magenta"},
                {"id":"grocery","x":200,"y":100,"w":50,"h":50,"bg":"green"},
                {"id":"post_office","x":300,"y":100,"w":50,"h":50,"bg":"orange"}
];

for(var i = 0; i < buildings.length; i++){
    var b = buildings[i];
    ctx.fillStyle = b.bg;
    ctx.fillRect(b.x,b.y,b.w,b.h); }

    var bM=buildings[0];
    var bG=buildings[1];
    var bO=buildings[2];

    function drawMagenta(){
        window.setTimeout(drawMagenta,100)
            ctx.clearRect(0,0,500,300);
        ctx.fillStyle = bM.bg;
        ctx.fillRect(bM.x,bM.y,x,y);
        x-=5;
        y-=5;
        bM.x-=10;
        bM.y-=10;
        if(x<=6){x=5;y=5}
    };

    function drawGreen(){
        window.setTimeout(drawGreen,100)
            ctx.clearRect(0,0,500,300);
        ctx.fillStyle = bG.bg;
        ctx.fillRect(bG.x,bG.y,x,y);
        x+=5;
        y+=5;
        bG.x-=15;
        bG.y-=15;
        if(x<=6){x=5;y=5}
    };

    function drawOrange(){
        window.setTimeout(drawOrange,100)
            ctx.clearRect(0,0,500,300);
        ctx.fillStyle = bO.bg;
        ctx.fillRect(bO.x,bO.y,x,y);
        x-=5;
        y-=5;
        bO.x+=10;
        bO.y+=10;
        if(x<=6){x=5;y=5}
    };
}

window.addEventListener('load', function(event) {
    initCanvas();
});
</script>
</head>
<body> <canvas id="my_canvas" width="500" height="300"></canvas>
<h2 id="status"></h2>
</body>
</html>