Camera Live stream - Identify a rectangle or a line which is coming on a filmed white background

I wondered if it's possible to recover 'y axis' coordinate of a line that is drawn on a white background in live streaming.

Imagine a camera is filming a white rectangle background. Now, a stick arrived in the camera view. So it makes a sort of line thru the white rectangle. Is it possible to take 'y axis' coordinate of that shape in script?

a little scheme here to be clear:

OK,Thanks to the answer, I create a html canvas, I have iterate my image in black and White. But I'm not sure how to separate black pixels out of white pixels and get the coordinate of the shape (as in my scheme).

Could you help me for this part?

My actual code:

<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="booth">
        <video id="video" width="400" height="300" autoplay></video>
        <canvas id="canvas" width="400" height="300"></canvas>
    </div>
    
    
    
    <script src="js/video.js"></script>
</body>
</html>

My Script:

(function(){
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        video = document.getElementById('video'),
        vendorUrl = window.URL || window.webkitURL;
    
    navigator.getMedia =    navigator.getUserMedia ||
                            navigator.webkitGetUserMedia ||
                            navigator.mozGetUserMedia ||
                            navigator.msGetUserMedia;
    
    navigator.getMedia({
        video: true,
        audio: false
    }, function(stream) {
        video.srcObject=stream;
        video.play();
        }, function(error) {
        // Error Occured
        // error.code
}); 
    video.addEventListener('play', function(){
        draw(this, context, 400, 300);
    }, false);
    
    function draw(video, context, width, height) {
        var image, data, i, r, g, b, brightness;
        
        context.drawImage(video, 0, 0, width, height);
        
        image = context.getImageData(0, 0, width, height)
        data = image.data;
        
        for(i =0; i < data.length; i = i + 4 ){
            r = data[i];
            g = data[i+1];
            b = data[i+2];
            brightness = (r*3 + g*2 + b)/3;
            
            data[i] = data[i + 1] = data[i + 2] = brightness;
        }
        
        image.data=data;
        
        context.putImageData(image, 0, 0);
        
        setTimeout(draw, 10, video, context, width, height);
    }
    
})();

My Css:

.booth {
    width: 400px;
    background: #ccc;
    border: 10px solid #ddd;
    margin: 0 auto;
    
}