let isDrawing = false;
let x0 = 0;
let y0 = 0;
let rectangle = null

document.addEventListener("DOMContentLoaded", function(){
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    var src = document.getElementById("current_color_stream");
    var img = new Image();
    img.src = src.src;
    img.onload = function() {
        draw(ctx, img);
    };

    canvas.addEventListener("mousedown", e => {
        x0 = e.offsetX;
        y0 = e.offsetY;
        isDrawing = true;
    });

    canvas.addEventListener("mousemove", e => {
        if(isDrawing === true) {
            draw(ctx, img);
            x1 = e.offsetX;
            y1 = e.offsetY;
            ctx.beginPath();
            ctx.rect(x0,y0,x1-x0,y1-y0);
            ctx.stroke();
        }
    });

    canvas.addEventListener("mouseup", e => {
        if(isDrawing === true) {
            
        }
        isDrawing = false;
    });
});

function draw(ctx, img){
    ctx.drawImage(img, 0, 0)
}