Get canvas color per pixel

HTML

<canvas id="canvas" width="150" height="150"></canvas>
<div id="status"></div><br>
<div id="color" style="width:30px;height:30px;"></div>
<p>
Move the mouse over the BUS !
</p>

JavaScript

var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(0, 0, 200, 200);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();

    context.beginPath();
    context.rect(50, 50, 50, 50);
    context.fillStyle = 'red';
    context.fill();
    context.closePath();

    var imageData = context.getImageData(0, 0, 200, 200).data;

    console.log('imageData is ', imageData);

    for(var x = 0; x < 10; x++) {

        var x = Math.floor(Math.random() * 200);
        var y = Math.floor(Math.random() * 200);

        console.log('x, y is ', x, y);

        // how to I get the color here?
        var color = Uint8ClampedArray[x][y];

        console.log('color is ', color);
    }