The second time of onchage does not work on an input file

The code tries to draw on the canvas the image that I select with the input, but it turns out that in the code I have, the first time I enter an image it works but when I re-select another photo in the input file, the onchange no longer works.

HTML Code:

 <canvas id="cv01" onclick="document.getElementById('imgn').click();"> </canvas>
<footer>
    <button onclick="document.getElementById('imgn').click();">Seleccionar imagen</button>
    <input type="file" name="img" id="imgn" accept="image/*" onchange="imagen(); cambiarBotones();"> <br>
</footer>

<canvas id="cv02"></canvas>
<footer>
    <label>Dificultad: </label>
    <select id="dificultad" onchange="lineas();">
        <option value="facil">Fácil</option>
        <option value="medio">Medio</option>
        <option value="dificil">Difícil</option>
      </select>
      <input type="color" id="color" onchange="lineas();">
      <button disabled="disabled" id="start" onclick="empezar();">Empezar</button>
      <button disabled="disabled" id="end" onclick="terminar();">Terminar juego</button>
      <button disabled="disabled" id="ayuda" >Ayuda</button>
      <div id='seconds-counter'> </div>

</footer>

JS Code:

  function imagen(){
let cv = document.querySelector('#cv01'),
    cv02 = document.querySelector('#cv02'),
    ctx = cv.getContext('2d'),
    ctx2 = cv02.getContext('2d'),
    img=new Image(); //img es un objeto de js

imagen= document.getElementById("imgn");
var curFile = imagen.files[0];
img.src = window.URL.createObjectURL(curFile);

img.onload = function(){
    //ctx.drawImage(img,0,0);
    ctx.drawImage(img,0,0, cv.width, cv.height); //Para que tenga el tamano maximo del canvas
    ctx2.drawImage(img,0,0,cv01.width, cv01.height);
    lineas();
}
_IMG_=img;
//imagen.value = "";  limpiar el input }



function lineas(){
    let cv = document.querySelector('#cv02'),
    ctx = cv.getContext('2d'),
    inp = document.getElementById('dificultad').value,
    color = document.getElementById('color').value;


if(inp =='facil'){
    r=3;
}
else if(inp =='medio'){
    r=6;
}
else if(inp == 'dificil'){
    r=8;
}
piezaCanvasHeight=_ALTO_/r;
piezaCanvasWidth = _ANCHO_/r;
let dimv = cv.width/r,
    dimh = cv.height/r;

ctx.clearRect(0, 0,360,240);//Reiniciar canvas
copiar();   //Copiar la imagen del canvas 1 

//Empezar a dibujar lineas
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle=color;

    for(let i=0; i<=r; i++){
        //lineas verticales
        ctx.moveTo(i*dimv,0);
        ctx.lineTo(i*dimv,cv.height);
        //lineas horizontales
        ctx.moveTo(0,i*dimh);
        ctx.lineTo(cv.width,i*dimh);
        ctx.stroke();
    }

}

function cambiarBotones(){
    start.disabled=false;
    start.style.background="rgba(255, 255, 0)";
}

This is the error that comes to me in the console:

  

Uncaught TypeError: image is not a function       at HTMLInputElement.onchange ((index): 24)

Thank you!