event blur in canvas html5

Question

I´m trying to add an EventListener to my canvas when I lose focus in this canvas.

I have two canvases:

In the first canvas (at left), I draw a signature, and when change focus to the right canvas, I want the signature drawn on the first canvas to get saved in the server. I know how I can apply the logic to save in the server but I am unable to call the blur event in the canvas.

To try this, I'm doing:

var canvas = document.getElementById("pizarra_cliente");
canvas.addEventListener("blur" , function() { 
  console.log("entro");
});

But if I put a debugger in the developer tools, I see the breakpoint is not being fired inside the blue event. I tried with the onfocusout as well but got the same problem.

Anybody can help me to create an event (focusOut or blur) to my canvas?

I´m using blur because I read that this is an event that should be used in such use cases.

Answer 1

i get it with this logic:

canvas.addEventListener("mouseout", function(evt) {
  let c = document.querySelector('#pizarra_cliente');
  var b64Image = c.toDataURL("image/png");
  let token = document.querySelector('meta[name="csrf-token"]').content;
  let contract = document.getElementById('n_contract').value;
  let installation = document.getElementById('installation_id').textContent;
  
  // upload image canvas to server
  fetch("/installator/saveClientSignature", {
      method: "POST",
      //mode: "no-cors",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        'X-CSRF-Token': token,
      },
      body: JSON.stringify({'image':b64Image, 'contract': contract, 'install': installation})
  }).then(response => response.text())
    .then(success => "")
    .catch(error => "");

})

I used mouseout event to get event and generate image with canvas data. My image it´s generated ok, and saved in my folder.