So I am creating a paint-like app, and I would like to have soft edges around the lines so they are not jagged. To do this easily I use rgba to layer strokes. Here is some code:

$('canvas').mousemove(function(e){
    // test if user is pressing down
    if(going == true){
        x = e.pageX;
        y = e.pageY;
        // w is the line width, and the last 4 inputs are rgba for the color
        draw(x,y,w+5,100,100,100,0.1);
        draw(x,y,w+4,100,100,100,0.3);
        draw(x,y,w+3,100,100,100,0.5);
        draw(x,y,w+2,100,100,100,0.7);
        draw(x,y,w+1,100,100,100,0.9);
        draw(x,y,w,100,100,100,1);
    };
});

At first, this works in creating the soft edges, yet for some reason, they fade in as you continue to draw and bee jagged again! Here is a jsfiddle with a more obvious display of how the blurring fades in (by using a different blur color than stroke color): /

Question:

Why is this happening, and how can I stop it?

extra code:

In case you want to look at the draw function, here it is:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw(x,y,w,r,g,b,a){
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    ctx.stroke()  
};

So I am creating a paint-like app, and I would like to have soft edges around the lines so they are not jagged. To do this easily I use rgba to layer strokes. Here is some code:

$('canvas').mousemove(function(e){
    // test if user is pressing down
    if(going == true){
        x = e.pageX;
        y = e.pageY;
        // w is the line width, and the last 4 inputs are rgba for the color
        draw(x,y,w+5,100,100,100,0.1);
        draw(x,y,w+4,100,100,100,0.3);
        draw(x,y,w+3,100,100,100,0.5);
        draw(x,y,w+2,100,100,100,0.7);
        draw(x,y,w+1,100,100,100,0.9);
        draw(x,y,w,100,100,100,1);
    };
});

At first, this works in creating the soft edges, yet for some reason, they fade in as you continue to draw and bee jagged again! Here is a jsfiddle with a more obvious display of how the blurring fades in (by using a different blur color than stroke color): http://jsfiddle/mj4zn/1/

Question:

Why is this happening, and how can I stop it?

extra code:

In case you want to look at the draw function, here it is:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw(x,y,w,r,g,b,a){
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    ctx.stroke()  
};

• javascript
• jquery
• html
• html5-canvas

2 Answers 2

The reason you get this effect is because you start a new path on mouse down, and then on each mousemove you add a new point to the path and then draw the path. This means that you redraw the same parts of the path again and again, which adds the semitransparent pixels together thus defeating the softness.

I would suggest just using a gradient circle as a "brush" instead. Here's a modified jsfiddle: http://jsfiddle/yB3Kr/

The main changes are done to the draw function:

function draw(x,y,w,r,g,b,a){
    var gradient = ctx.createRadialGradient(x, y, 0, x, y, w);
    gradient.addColorStop(0, 'rgba('+r+', '+g+', '+b+', '+a+')');
    gradient.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0)');

    ctx.beginPath();
    ctx.arc(x, y, w, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.closePath();
};

This creates a dot. So in the mousemove, we need to call it several times (depending on how much the mouse coord has changed since last mousemove event) to create a continous line, as you can see in the jsfiddle.

Check if this is what you want http://jsfiddle/mj4zn/2/

function draw(x,y,w,r,g,b,a){
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    canvas.style.webkitFilter = "blur(1px)";
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' +a+ ')';

Plus

draw(x,y,w+5,0,0,0,0.9);