Implementing smooth sketching and drawing on the <canvas> element

Question

I am trying to create a drawing area with canvas. I am having trouble with making the lines look smooth when drawing curves and I also have changing line thickness in my algorithm which looks bad as well because the size jumps to much as well and you can see where the size changed. I did find this link on stackoverflow but this was for a native iPhone app and I can't figure it out.

Here is my current JS code. and Here is it running on jsFiddle

var xStart,
xEnd,
yStart,
yEnd,
paint,
ctx;
$(document).ready(function (){

   ctx = $('canvas')[0].getContext("2d");
   ctx.strokeStyle = '#000';
   ctx.lineJoin="round";
   ctx.lineCap="round";
   ctx.lineWidth = 1;


   $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
        var orig = e.originalEvent;

        if(e.type == 'mousedown'){
            e.preventDefault(); e.stopPropagation();

            xStart = e.clientX - $(this).offset().left;
            yStart = e.clientY - $(this).offset().top;
            xEnd = xStart;
            yEnd = yStart;

            paint = true;
            draw(e.type);

        }else if(e.type == 'mousemove'){
            if(paint==true){
                xEnd = e.clientX - $(this).offset().left;
                yEnd = e.clientY - $(this).offset().top;


               lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/5;

               if(lineThickness > 10){
                    lineThickness = 10;   
               }

                ctx.lineWidth = lineThickness;
                draw(e.type);
            }
        }else if(e.type == 'mouseup'){
            paint = false;
        }else if(e.type == 'mouseleave'){
            paint = false;
        }else if(e.type == 'touchstart'){
            if(orig.touches.length == 1){
                e.preventDefault(); e.stopPropagation();

                xStart = orig.changedTouches[0].pageX - $(this).offset().left;
                yStart = orig.changedTouches[0].pageY - $(this).offset().top;
                xEnd = xStart;
                yEnd = yStart; 

                paint = true;
                draw(e.type);
            }
        }else if(e.type == 'touchmove'){
            if(orig.touches.length == 1){
                if(paint==true){
                    xEnd = orig.changedTouches[0].pageX - $(this).offset().left;
                    yEnd = orig.changedTouches[0].pageY - $(this).offset().top;


                            lineThickness = 1 + Math.sqrt((xStart - xEnd) *(xStart-xEnd) + (yStart - yEnd) * (yStart-yEnd))/6;
                       if(lineThickness > 10){
                          lineThickness = 10;   
                       }


                      ctx.lineWidth = lineThickness;


                    draw(e.type);
                }
            }
        }else if(e.type == 'touchend'){
            paint = false;
        }

      });
    });


    function draw(event){

    if(event == 'mousedown'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'mousemove'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'touchstart'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }else if(event == 'touchmove'){
        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.stroke();
    }
    xStart = xEnd;
    yStart = yEnd;                  
}

Thank you all in advance.

This is what it looks like right now if you draw.

... and this is what I would love to achieve:

Cleodal

Answer 1

I made something like this a while ago and turned it into a jquery plugin. have a look over here, if it's what you're after I'll post a more detailed answer and dig out the simplified jquery version from my archives:

http://jsfiddle.net/95tft/

EDIT

OK, sorry I couldn't do this yesterday:

Originally the code above was forked from Mr Doob's 'harmony' sketcher over here: http://mrdoob.com/projects/harmony/#ribbon

(which I think is the best solution). But I kinda broke it down and remade it for my own purposes on another project. I've hacked my own plugin a bit to make it a bit easier still over here:

http://jsfiddle.net/dh3bj/

The only thing you might want to change is to change it to work on mousedown/mouseup which should be easy also have a look at the settings at the bottom of the plugin, you should be able to get the effect you want by playing with the brush size, colour, alpha (rgba) etc.

Hope that helps

Blondell

yes this is definitely in the right direction. Thank you for digging out your code I will be waiting for yours detailed answers. – Cleodal

@Cleodal added above. Let me know if you need any more info? – Blondell

If you click "ABOUT" on mrdoob.com, one of the links is "source code" which takes you to github.com/mrdoob/harmony – Trula

Answer 2

Have a look at this code:

http://jsfiddle.net/aMmVQ/

What I'm doing is starting a new list of points on mouseDown, then for each mousemove I add a point to the list. Once I get enough points (6 or so) I start drawing quadratic curves, with the control point of the curve being the average of the current point and the next point.

drawPoints is the bit that works this magic:

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()
}

Ranite

your code works great to create smooth lines but what about changing line thickness aka ctx.lineWidth as you are drawing. The problem that I have with your method is that your drawing all the points and once your done drawing all of them then you end the stroke(). For line thickness to change it code seems to have to be beginPath() moveTo() quadraticCurveTo() stroke() all within the loop but when I did move it in it just does something funky. – Cleodal

For the record the image that you posted which you say you want to achieve does not change thickness, only opacity at the ends. – Ranite

What's the "in memory canvas" for? – Subtractive

Answer 3

Why don't you use croquis.js?

It has neat brush implementation like photoshop :)

And here is Demo which is using croquis.js.

Neckband

Can I get the source code for this? Croquis has no documentation, and I need to find how to draw a single circle on each mouse move. – Cutwater

Answer 4

Seems that you need to use some brushes in your canvas. It's hard to say what kind of brush exactly you need but there is many JS libraries that has already implement brush technology.

For example did you look at this libraries?

• Processing.js
• HTML5-Canvas-Brush-Sketch (demo and article how it works)

Laso in web you can find many brushes implemented in Mr. Doob Harmony project. For example stringy or Harmony-Brushes project on github.

Noblenobleman

Here is the code from above on jsFiddle link as you will see it is really choppy, the lines are not smooth and you can definitely tell where the line thickness changes in the stroke – Cleodal

Answer 5

Suggest the rendering be done with a chain of bezier curves which surround the curve which is thus filled. (ie end with ctx.fill) Still lots of work to do but hope this helps.

Adapted a nice demo app for bezier curves

added it to a fork of your fiddle http://jsfiddle.net/d3zFU/1/

Code is

/*
 * 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.
 */

(function() {

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");
}

})();

Windowsill

Answer 6

For those interested in a click version of the code provided by @Alex, I've rewritten his script here:

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

District

Answer 7

Important!

I collected some needed parts and attached here all of that!

<canvas id="paint_board" width="500" height="800" style="border: 1px solid;"></canvas>

<script>
var el = document.getElementById('paint_board');
// rect gets the cavas left top value in browser
var rect = el.getBoundingClientRect();
var ctx = el.getContext('2d');
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.lineWidth = 1;
var isDrawing, pen_type=1;
var screenWidth=500, screenHeight=500;  //set canvas width and height
var strokes=20;                         //how many strokes to draw
var color = [0, 0, 0]; // color val RGB 0-255, 0-255, 0-255
var painters = [], unpainters = [], timers = [];
var brushPressure=1; // brush Opacity
var easing = 0.7; // kind of "how loopy" higher= bigger loops
var refreshRate = 30; // set this higher if performace is an issue directly affects easing
var mouseX = screenWidth / 2, mouseY = screenHeight / 2;
var testinterval;

pen_init();
function pen_init(){
    for(var i = 0; i < strokes; i++) {
        var ease = Math.random() * 0.05 + easing;
        painters.push({
            dx : screenWidth / 2,
            dy : screenHeight / 2,
            ax : 0,
            ay : 0,
            div : 0.1,
            ease : ease
        });
    }
    testinterval = setInterval(update, refreshRate);
    function update() {
        var i;
        ctx.strokeStyle = "rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", " + brushPressure + ")";
        for( i = 0; i < painters.length; i++) {
            ctx.beginPath();
            var dx = painters[i].dx;
            var dy = painters[i].dy;
            ctx.moveTo(dx, dy);
            var dx1 = painters[i].ax = (painters[i].ax + (painters[i].dx - mouseX) * painters[i].div) * painters[i].ease;
            painters[i].dx -= dx1;
            var dx2 = painters[i].dx;
            var dy1 = painters[i].ay = (painters[i].ay + (painters[i].dy - mouseY) * painters[i].div) * painters[i].ease;
            painters[i].dy -= dy1;
            var dy2 = painters[i].dy;
            ctx.lineTo(dx2, dy2);
            ctx.stroke();
        }
    }
}
el.onmousedown = function(e) {
    isDrawing = true;
    mouseX = e.clientX+window.scrollX-rect.left;
    mouseY = e.clientY+window.scrollY-rect.top;
    var i = 0, paintersLen = painters.length;
    for(i; i < paintersLen; i++) {
                painters[i].dx = mouseX;
                painters[i].dy = mouseY;
    }
};
el.onmousemove = function(e) {
    if (!isDrawing) return;
    mouseX = e.clientX+window.scrollX-rect.left;
    mouseY = e.clientY+window.scrollY-rect.top;
};
el.onmouseup = function() {
    isDrawing = false;
};
</script>

Just copy all and paste it to your code. And don't forget to click the voting!

Dishman

Just posting code is not a proper answer. Please explain it. – Focus