将带有图像的画布保存到文件夹

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个代码是in this fiddle: