Javascript html5画布保存背景

我正在用画布工作。。。我修改了一个选择一个背景，当完成绘图保存它与背景。。。直到在后台选择都是好的。。。现在我有一些问题，说实话，我不知道该怎么办

以下是我工作的url：

第一个问题是光标。。。我需要画布显示在选项卡内，当我绘制光标而不是在画布内显示0,0时，画布在页面上显示为0,0，因此当我开始绘制时，线条显示如下图所示：

第二个问题是当我尝试保存结果时…当仅绘制线条时，画布成功保存，但当背景不存在时。。。你可以试试我上面添加的链接

最后一个问题是当我点击橡皮擦或撤消…背景和我画的所有内容都被删除。。。我只需要最后几行就可以抹掉，不是全部。。。这个问题能解决吗

这里我添加了js：

这里是grabado.php：

<?php
/**
* -------------------------------
* Customizable Settings
* -------------------------------
*/
$dd_savePath=str_replace('\\','/',dirname(__FILE__))."/tmp";
$prependSig="diag_";
/**
* -------------------------------
* End of customizable settings
* -------------------------------
*/
/**
* Attempt to create the needed save dir if not exist
*/
if(!is_dir($dd_savePath)) {
    @mkdir($dd_savePath,0777);
    @chmod($dd_savePath,0777);
}
//
$action=strip_tags(trim($_POST['action']));
$fileName=strip_tags(trim($_POST['file_name']));
$width=strip_tags(trim($_POST['width']));
$height=strip_tags(trim($_POST['height']));
$download=(isset($_POST['download']) ? strip_tags(trim($_POST['download'])) : strip_tags(trim($_GET['download'])));
/**
* @desc 
*/
class createSignature {
    private $img, $file, $dest;

    public function __construct($i,$d) {
        $this->file=$i;
        $this->dest=$d;
    }

    public function makePNG($w,$h) {
        $this->img=@imagecreatefrompng($this->file);
        //
        imagealphablending($this->img, true);   // setting alpha blending on
        imagesavealpha($this->img, true);       // save alphablending setting (important)
        //
        $canvas=self::makeCanvas('png',$w,$h);
        // Let's get our dims for original image
        $trueSize=getimagesize($this->file);
        //
        imagecopyresampled($canvas,$this->img,0,0,0,0,$w,$h,$trueSize[0],$trueSize[1]);
        //
        if(imagepng($canvas,$this->dest)) {
            @chmod($this->dest,0777);
            @imagedestroy($this->img);
            @imagedestroy($canvas);
            return true;
        }else{
            return false;
        }
    }

    private function makeCanvas($t,$w,$h) {
        switch($t) {
            case "png":
                $canvas=imagecreatetruecolor($w,$h);
                imagecolortransparent($canvas, imagecolorallocatealpha($canvas, 0, 0, 0, 127));
                imagealphablending($canvas, false); // setting alpha blending on
                imagesavealpha($canvas, true);      // save alphablending setting (important)
                break;
            default:
        }
        //
        return $canvas;
    }
}
/**
* If download flag, then we're downloading a created signature image
*/
if($download!="") {
    //
    $downloadFile="{$dd_savePath}/{$download}";
    //
    $ctype="application/force-download";
    header("Pragma: public");
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Content-Type: $ctype");
    header("Content-Length: ".filesize($downloadFile));
    header("Content-Disposition: attachment; filename=\"".basename($downloadFile)."\"");
    header("Accept-Range: bytes");
    set_time_limit(0);
    readfile("{$downloadFile}");
    header("Connection: close");

/**
* Else we're building a new signature image
*/
}else{
    $data=$_POST['data'];
    $data=str_replace(' ','+',$data);   // convert any whitespace
    /**
    * Now let's decode it so it's recognized as an img
    */
    $decodeData=@base64_decode($data);
    /**
    * Finally, save her
    */
    $file="{$dd_savePath}/".($action=="sig" ? "{$prependSig}{$fileName}" : "{$prependTxt}{$fileName}");
    if(@file_put_contents($file, $decodeData)) {
        @chmod($file,0777);
        /**
        * If we've saved a signature, let's replicate it to proper size
        * since our signature object is bigger (in real dimensions) than what we want
        * See our css+html notes
        */
        switch($action) {
            case "sig":
                $newFile=$dd_savePath.'/tmp_'.$fileName;
                $newSig=new createSignature($file,$newFile);
                $result=$newSig->makePNG($width,$height);
                if($result==true) {
                    // Finally, we want to delete the original and replace it with the new resized one
                    @unlink($file);
                    $finalName=str_replace('tmp_',$prependSig,$newFile);
                    @rename($newFile,$finalName);
                    //
                    $finalName=substr(strrchr($finalName,'/'),1);
                    echo "success|{$finalName}";
                }else{
                    echo "failed";
                }
                break;
            default:
                echo "success";
        }

    }else{
        echo "{$file}";
    }
}
?>

在这种情况下，您的js代码将比您的php更有用。对于鼠标位置，请阅读以下内容：。至于第二个问题，我无法复制它。我添加背景，在画布上绘制，保存，图像包含背景和绘图。第三个问题有点复杂，如果你只想删除图形而不想删除背景，我认为他们需要在两个独立的页面上canvases@JonasGrumann谢谢，我会读这篇文章，希望能在js中找到我需要改变的地方。是的，背景和线条的问题对我来说是个谜…但是对于两幅画布，如何将两者保存在一幅图像中？当您单击“保存”时，将背景画布和绘图画布复制到一幅新的画布上并导出。嗨，@JonasGrumann我对画布的宽度和高度进行了一些测试，如果画布的宽度为320，高度为240，则保存我绘制的线条背景。。。有一种形式，我可以保存一个更大的画布？？我需要一块600宽600高的帆布