clearRect clearing the entire screen

i’m new to js and would like some help. I’m making a system where I’m taking the value of an input and inserting the typed text inside an image with canvas. I would like some help because when I have more than one input field, when using ctx.clearRect, it always clears the contents of the other input when typing the second input. Could someone help me?

My form

<form>
    <img style="display:none" src="images/facebook.jpg" crossorigin="anonymous" />
    <input type="text" id="vaga" />
    <input type="text" id="nome" />
    <button type="submit">Save</button>
</form>

My JS

    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = $('img').width();
    canvas.crossOrigin = "Anonymous";
    canvas.height = $('img').height();
    ctx.drawImage($('img').get(0), 0, 0);
    ctx.font = "36pt Verdana";

    $(document).on('input', '#vaga', function() {
        //redraw image
        ctx.clearRect(550, 80, 200, 20);
        ctx.drawImage($('img').get(0), 0, 0);
        //refill text
        ctx.font = "26pt 'Bebas Neue'";
        ctx.fillStyle = "black";
        ctx.textAlign = 'center';
        //ctx.fillText('center-aligned', x, 85);
        ctx.fillText($(this).val(), 550, 80);
    });

    $(document).on('input', '#nome', function() {
        //redraw image
        //ctx.clearRect(190, 180, 120, 120);
        ctx.drawImage($('img').get(0), 0, 0);
        //refill text
        ctx.font = "14pt 'Bebas Neue 400'";
        ctx.textAlign = 'left';
        ctx.fillStyle = "black";
        ctx.fillText($(this).val(), 190, 180);
    });

    $('button').click(function() {
        console.log(ctx.getImageData(50, 50, 100, 100));
    });

Thaks