Problema para cambiar el valor de un input

[Montes28]

hola amigos, tengo un problema para colocar valores 0 en un input despues de click en un botton solo consigo colocarlos en dos inputs

Código HTML:

X1<input type="text" id="x1" value="0" class="input"/>Y1<input type="text" id="y1" value="0"/><br/>
X2<input type="text" id="x2" value="0"/>
Y2<input type="text" id="y2" value="0"/>
<input type="button" value="Recalcular" onclick="myFunction()">
 

Código Javascript:

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    cont = 0,
    xIni, yIni, 
    xFin, yFin;
    
 
window.addEventListener("click", function(e){
    
    var x;
    var y;
    
    if (e.pageX || e.pageY) { 
      x = e.pageX - (e.pageX - e.layerX);
      y = e.pageY - (e.pageY - e.layerY);
      
    }
    else { 
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    } 
    
    
    if (++cont % 2 !== 0){       
        xIni = x;
        yIni = y;
        document.getElementById("x1").value = xIni;
        document.getElementById("y1").value = yIni;
    }
    else{
        xFin = x;
        yFin = y;
        document.getElementById("x2").value = xFin;
        document.getElementById("y2").value = yFin;
        
        context.moveTo(xIni, yIni);
        context.lineTo(xFin, yFin);
        context.lineWidth = 2;
        context.strokeStyle = "white";
        context.stroke();
    }
}, false);
function  myFunction() {
     
     document.getElementById("x1").value = 0;
     document.getElementById("y1").value = 0;
     document.getElementById("x2").value = 0;
     document.getElementById("y2").value = 0;
       
}
 

en q