DOMException error in console when sending canvas table

Question

I take a profile photo from a different site on our canvas, which will vary according to the person. When I press the button, the canvas table created is sent to the e-mail address of the relevant person. Before adding the profile photo, there was no problem, I can send it without any problem. When I activate the profile photo feature and press the button, I get the error at the bottom.

First error code;

function uploadEx(data, isim, kullanicimail) {

var canvas = document.getElementById('canvas'+data);
var dataURL = canvas.toDataURL('image/png'); [COLOR=#000000][FONT=Open Sans]------------ burayı işaret ediyor[/FONT][/COLOR] 
document.getElementById('hidden_data').value = dataURL; 
var fd = new FormData(document.forms["form1"]);
$.ajax({
  type: 'POST',
  url: 'dogumgunu_gonder.php',
  data: {hidden_data : dataURL, isim : isim, kullanicimail : kullanicimail},
  success: function(ajaxCevap) {
    Swal.fire({
      position: 'center',
      icon: 'success',
      title: 'Kıdem mesajı başarıyla sunucuya yüklendi ve kullanıcıya mail olarak gönderildi',
      showConfirmButton: false,
      timer: 3000
    })
  }
});

};

Second error code;

<input class="btn btn-block btn-info idbuton<?php echo $kidem; ?>" type="button" onclick="uploadEx('<?php echo $kidem; ?>','<?php echo $isim2; ?>','<?php echo $KullaniciMail; ?>, <?php echo $parcala[0]; ?>'); this.disabled=true; this.value='Gönderildi.';" value="Gönder: <?php echo $isim2 ?> <?php echo $soyad; ?>" />