javascript - キャンバスの描画を最適化して連続パスを作成する

Question

これは、キャンバスのグリッドの四角形を赤色で塗りつぶすためのスクリプトです。ここのようにチョッピングせずに、スクリプトを最適化して四角形を連続的に塗りつぶす方法のヒントを探しています。

いくつかの機能を分離して統合しようとしましたが、解決策が見つかりません。更新された jsFiddleと私のコードは次のとおりです。

---

HTML:

<canvas id="plan" width="501px" height="301px"></canvas>

JavaScript (更新):

var canvas = document.getElementById('plan');
var context = canvas.getContext('2d'),
    wt = canvas.width,
    ht = canvas.height;
var down = false;
var draw = function (e) {};

window.onload = grid();

var oldPos = {
    mX: 0,
    mY: 0
};

var dPos = {
    mX: 0,
    mY: 0
};

var curPos = {
    mX: 0,
    mY: 0
};

draw.to = function (X, Y) {
    oldPos = getMousePos(canvas, e); //update position
    var mposX = X,
        mposY = Y;
    mposX = mposX - mposX % 5;
    mposY = mposY - mposY % 5;
    context.fillStyle = "red";
    context.fillRect(mposX + 0.5, mposY + 0.5, 5, 5);
};

draw.single = function (e) {
    oldPos = getMousePos(canvas, e);
    var mpos = getMousePos(canvas, e);
    mpos.mX = mpos.mX - mpos.mX % 5;
    mpos.mY = mpos.mY - mpos.mY % 5;
    context.fillStyle = "red";
    context.fillRect(mpos.mX + 0.5, mpos.mY + 0.5, 5, 5);
};

draw.move = function (e) {
    if (down) {
        curPos = getMousePos(canvas, e);
        dPos.mX = Math.abs(curPos.mX - oldPos.mX); // distance between old & new (delta X)
        dPos.mY = Math.abs(curPos.mY - oldPos.mY); // delta Y
        if (dPos.mX >= 5 || dPos.mY >= 5) { // if the distance is bigger than 5px hz OR 5px vertical
            lightIntermediateSquares(oldPos.mX, oldPos.mY, curPos.mX, curPos.mY); // ^ connect them
        } else {
            draw.single(e); // simple
        }
    }
};

draw.start = function (e) {
    e.preventDefault();
    down = true;
    draw.single(e);
};

draw.stop = function (e) {
    down = false;
};

function lightIntermediateSquares(startX, startY, endX, endY) {
    for (var pct = 0; pct <= 1; pct += 0.03) {
        var dx = endX - startX;
        var dy = endY - startY;
        var X = startX + dx * pct;
        var Y = startY + dy * pct;
        draw.to(X, Y); // is it okay?
    }
}

function grid() {
    context.strokeStyle = "#f0f0f0";
    var h = 2.5,
        p = 2.5;
    context.strokeRect(0.5, 0.5, 5, 5);
    for (i = 0; i < wt; i += p) {
        p *= 2;
        context.drawImage(canvas, p, 0);
    }
    for (i = 0; i < ht; i += h) {
        h *= 2;
        context.drawImage(canvas, 0, h);
    }
}

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    return {
        mX: e.clientX - rect.left - 1,
        mY: e.clientY - rect.top - 1
    };
}

canvas.addEventListener('mouseup', draw.stop, false);
canvas.addEventListener('mousedown', draw.start, false);
canvas.addEventListener('mousemove', draw.move, false);
canvas.addEventListener('mouseout', draw.stop, false);