Реализация плавного эскиза и рисования на элементе

взгляните на этот код:

http://jsfiddle.net/aMmVQ/

Я начинаю новый список точек на mouseDown, затем для каждого mousemove я добавляю точку в список. Как только я получаю достаточное количество точек (6 или около того), я начинаю рисовать квадратичные кривые, причем контрольная точка кривой является средним значением текущей точки и следующей точки.

drawPoints Это бит, который работает эту магию:

function drawPoints(ctx, points) {
    // draw a basic circle instead
    if (points.length < 6) {
        var b = points[0];
        ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill();
        return
    }
    ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y);
    // draw a bunch of quadratics, using the average of two points as the control point
    for (i = 1; i < points.length - 2; i++) {
        var c = (points[i].x + points[i + 1].x) / 2,
            d = (points[i].y + points[i + 1].y) / 2;
        ctx.quadraticCurveTo(points[i].x, points[i].y, c, d)
    }
    ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y), ctx.stroke()
}

Почему бы вам не использовать croquis.js?

Он имеет опрятный реализация кисти, как photoshop :)

а вот демо, который использует croquis.js.

кажется, что вы должны использовать кисточки в свой холст. Трудно сказать, какая именно кисть вам нужна, но есть много библиотек JS, которые уже реализуют технологию кисти.

например, вы смотрели на эти библиотеки?

• обработка.js
• HTML5-холст-кисть-эскиз (демо и статьи как это работает)

Laso в интернете вы можете найти много кистей, реализуемых в Дооб-Н гармония. Например жилистое или Гармония-Щетки проект на github.

предложите, чтобы рендеринг был сделан с цепочкой кривых Безье, которые окружают кривую, которая таким образом заполнена. (т. е. конец с ctx.заполнить) Еще много работы, но надеюсь, что это помогает.

адаптировано хорошее демо-приложение для кривых Безье

добавил его в вилку вашей скрипки http://jsfiddle.net/d3zFU/1/

код

/*
 * Canvas curves example
 *
 * By Craig Buckler,        http://twitter.com/craigbuckler
 * of OptimalWorks.net        http://optimalworks.net/
 * for SitePoint.com        http://sitepoint.com/
 *
 * Refer to:
 * http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/
 * http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/
 *
 * This code can be used without restriction.
 */

(функция() {

var canvas, ctx, code, point, style, drag = null, dPoint;

// define initial points
function Init(quadratic) {

    point = {
        p1: { x:100, y:250 },
        p2: { x:400, y:250 }
    };

    if (quadratic) {
        point.cp1 = { x: 250, y: 100 };
    }
    else {
        point.cp1 = { x: 150, y: 100 };
        point.cp2 = { x: 350, y: 100 };
    }

    // default styles
    style = {
        curve:    { width: 6, color: "#333" },
        cpline:    { width: 1, color: "#C00" },
        point: { radius: 10, width: 2, color: "#900", fill: "rgba(200,200,200,0.5)", arc1: 0, arc2: 2 * Math.PI }
    }

    // line style defaults
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    // event handlers
    canvas.onmousedown = DragStart;
    canvas.onmousemove = Dragging;
    canvas.onmouseup = canvas.onmouseout = DragEnd;

    DrawCanvas();
}


// draw canvas
function DrawCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // control lines
    ctx.lineWidth = style.cpline.width;
    ctx.strokeStyle = style.cpline.color;
    ctx.fillStyle = style.cpline.color;
    ctx.beginPath();
    ctx.moveTo(point.p1.x, point.p1.y);
    ctx.lineTo(point.cp1.x, point.cp1.y);
    if (point.cp2) {
        ctx.moveTo(point.p2.x, point.p2.y);
        ctx.lineTo(point.cp2.x, point.cp2.y);
    }
    else {
        ctx.lineTo(point.p2.x, point.p2.y);
    }
    ctx.stroke();

    // curve
ctx.lineWidth = 1 ; //style.curve.width;
    ctx.strokeStyle = style.curve.color;
    ctx.beginPath();
    ctx.moveTo(point.p1.x, point.p1.y);
    if (point.cp2) {
        ctx.bezierCurveTo(point.cp1.x, point.cp1.y, point.cp2.x, point.cp2.y, point.p2.x, point.p2.y);
        ctx.bezierCurveTo(point.cp2.x, point.cp2.y+12, point.cp1.x, point.cp1.y+12, point.p1.x, point.p1.y);

    }
    else {
        ctx.quadraticCurveTo(point.cp1.x, point.cp1.y, point.p2.x, point.p2.y);
    }
//ctx.stroke();
ctx.fill();

    // control points
    for (var p in point) {
        ctx.lineWidth = style.point.width;
        ctx.strokeStyle = style.point.color;
        ctx.fillStyle = style.point.fill;
        ctx.beginPath();
        ctx.arc(point[p].x, point[p].y, style.point.radius, style.point.arc1, style.point.arc2, true);
        ctx.fill();
        ctx.stroke();
    }

    ShowCode();
}


// show canvas code
function ShowCode() {
    if (code) {
        code.firstChild.nodeValue =
            "canvas = document.getElementById(\"canvas\");\n"+
            "ctx = canvas.getContext(\"2d\")\n"+
            "ctx.lineWidth = " + style.curve.width +
            ";\nctx.strokeStyle = \"" + style.curve.color +
            "\";\nctx.beginPath();\n" +
            "ctx.moveTo(" + point.p1.x + ", " + point.p1.y +");\n" +
            (point.cp2 ?
                "ctx.bezierCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.cp2.x+", "+point.cp2.y+", "+point.p2.x+", "+point.p2.y+");" :
                "ctx.quadraticCurveTo("+point.cp1.x+", "+point.cp1.y+", "+point.p2.x+", "+point.p2.y+");"
            ) +
            "\nctx.stroke();"
        ;
    }
}


// start dragging
function DragStart(e) {
    e = MousePos(e);
    var dx, dy;
    for (var p in point) {
        dx = point[p].x - e.x;
        dy = point[p].y - e.y;
        if ((dx * dx) + (dy * dy) < style.point.radius * style.point.radius) {
            drag = p;
            dPoint = e;
            canvas.style.cursor = "move";
            return;
        }
    }
}


// dragging
function Dragging(e) {
    if (drag) {
        e = MousePos(e);
        point[drag].x += e.x - dPoint.x;
        point[drag].y += e.y - dPoint.y;
        dPoint = e;
        DrawCanvas();
    }
}


// end dragging
function DragEnd(e) {
    drag = null;
    canvas.style.cursor = "default";
    DrawCanvas();
}


// event parser
function MousePos(event) {
    event = (event ? event : window.event);
    return {
        x: event.pageX - canvas.offsetLeft,
        y: event.pageY - canvas.offsetTop
    }
}


// start
canvas = document.getElementById("canvas");
code = document.getElementById("code");
if (canvas.getContext) {
    ctx = canvas.getContext("2d");
    Init(canvas.className == "quadratic");
}

})();

для тех, кто заинтересован в версии кода, предоставленной @Alex, я переписал его сценарий здесь:

http://jsbin.com/aqoqad/3/