Сохранить холст с изображением с точками в папке

Question

На холсте я прикрепляю изображение, после щелчка на нем рисуется точка на изображении и при двойном щелчке точка удаляется.Моя конечная цель - сохранить изображение с точками в папке.К сожалению, в папке сохраняются только точки без изображения.

Как я могу исправить свои коды, чтобы сохранить обе точки и изображение в папке?

I- My code to save to the folder

// send to controller
 $('#save').on('click', function() {
  var canvasData1 = canvas.toDataURL("image/png");
 $.ajax({
type: "POST",
url: "<?=base_url('admin_medico/SaveCanvas')?>",
data: {canvasData1 :canvasData1}
   });

    });


//Controller

 $file2 = $upload_dir ."fondo-". time() . ".png";
$data2 = $_POST['canvasData1'];
$data2 = substr($data2,strpos($data2,",")+1);
$data2 = base64_decode($data2);
file_put_contents($file2, $data2);

2- коды для рисованиянажмите на точку и удалите точку двойного щелчка в этой скрипке: