畫布偏離中心，無法正常運行

Question

我寫了一個JavaScript，允許用戶用鼠標在HTML5畫布（類似於MS Paint）上繪制。

現在，我有兩個問題：

1. 僅當HTML5 canvas元素位於網頁的左上角（0，0）時，繪圖功能才起作用，否則它根本不起作用或繪圖偏離中心。

2. 我無法刪除圖形。 當我擦除圖形時，它會在再次開始繪制時立即擦除BUT，然后又恢復。

我的代碼如下：

HTML畫布

<canvas id="can1" width="500" height="500"></canvas>1

畫布繪圖JavaScript

// Variables
var x1;
var y1;
var isPressed = false;
var myCanvas;
var myContext;

function startCanvas() {

    // Canvas stuff
    myCanvas = document.getElementById("can1");
    myContext = myCanvas.getContext("2d");

    // Specify a black background, and white lines that are 3 pixels thick.
    myContext.fillStyle = '#fff';
    myContext.strokeStyle = '#fff';
    myContext.fillRect(0, 0, 500, 500);
    myContext.lineWidth = 3;
    myContext.fill();
}

function functionMouseDown(e) {
    // Get coordinates
    x1 = e.clientX
    y1 = e.clientY;

    isPressed = true;
}

function functionMouseMove(e) {
    // If mouse is down and moved start drawing line
    if (isPressed == true) {
        drawLine(e);
    }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
    //myContext.closePath();
    //myContext.stroke();
}

function drawLine(e) {
    // Draw line
    var x = e.clientX;
    var y = e.clientY;

    myContext.strokeStyle = '#cc0000';
    myContext.lineWidth = 1;
    myContext.moveTo(x1, y1);
    myContext.lineTo(x, y);
    myContext.stroke();

    // Set start coordinates to current coordinates
    x1 = x;
    y1 = y;
}

我用來擦除畫布的JavaScript：

myContext.clearRect(0, 0, 500, 500);

Answer 1

我使用以下功能來完成此操作

function relMouseCoords(event){/*needs fixing for general case*/
    var totalOffsetX = 0
    var totalOffsetY = 0
    var canvasX = 0
    var canvasY = 0
    var currentElement = this

    do{
        totalOffsetX += currentElement.offsetLeft
        totalOffsetY += currentElement.offsetTop
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX
    canvasY = event.pageY - totalOffsetY

    return {x:canvasX, y:canvasY}
}

HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

然后

var cord = e.target.relMouseCoords(e);
x1 = cord.x; 
y1 = cord.y;
...
var cord = e.target.relMouseCoords(e);
var x = cord.x;
var y =cord.y;

http://jsfiddle.net/mowglisanu/u3rvT/1/

Answer 2

最簡單的解決方案是使用myCanvas.offsetLeft和myCanvas.offsetTop設置畫布的偏移量。