Canvas only working properly with Dev. Console open

i'm having a problem with my canvas, every time i try to draw on it (with mouse event), the drawing looks rough (left drawing) but for some reason, if i open the dev console, the lines are correctly drawn.

img example

Why could this be? i tried resizing the canvas, changing to .roundFill, changing stroke size, color, removing the button event, windows size, even browser (currently using chrome). And i can not figure this out. No matter what i do, the only "solution" is opening the Chrome dev console, is this working as intended?

const context = canvas.getContext("2d")

function getMousePosition(cnv, evt){
const rect = cnv.getBoundingClientRect()

return{
    x : (evt.clientX - rect.left) / (rect.right - rect.left) * cnv.width,
    y : (evt.clientY - rect.top) / (rect.bottom - rect.top) * cnv.height
}
 }

canvas.addEventListener("mousemove",function(event){
let mousePosition = getMousePosition(canvas, event);

function drawSize(px,py){
    return context.fillRect(mousePosition.x-x*0.5, mousePosition.y-y*0.5, px,py); 
}

if(event.buttons === 1){
    context.fillStyle = COLORPICKER.value;
    drawSize(x,y);
    context.stroke();
}

});

Thanks in advance.