Canvas: How would you properly interpolate between two points using Bresenham's line algorithm?

Issue

I am making a simple HTML5 Canvas drawing app where a circle is placed at a x and y position each time the mouse moves. The (quite common but unsolved) problem is: when the mouse is moved very fast (as in faster than the mouse move events are triggered), you end up with space in between the circles.

I have used Bresenham's line algorithm to somewhat successfully draw circles between the gaps. However, I have encountered another problem: when the color is one of translucency I get an unintentional fade-to-darker effect.

Here's an example:

I don't understand why this is happening. How would you properly interpolate between two points using Bresenham's line algorithm? Or some other algorithm?

Here's my code: http://jsfiddle.net/E5NBs/

var x = null;
var y = null;
var prevX = null;
var prevY = null;
var spacing = 3;
var drawing = false;
var size = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function createFlow(x1, y1, x2, y2, callback) {
    var dx = x2 - x1;
    var sx = 1;
    var dy = y2 - y1;
    var sy = 1;
    var space = 0;

    if (dx < 0) {
        sx = -1;
        dx = -dx;
    }

    if (dy < 0) {
        sy = -1;
        dy = -dy;
    }

    dx = dx << 1;
    dy = dy << 1;

    if (dy < dx) {
        var fraction = dy - (dx >> 1);

        while (x1 != x2) {
            if (fraction >= 0) {
                y1 += sy;
                fraction -= dx;
            }

            fraction += dy;
            x1 += sx;

            if (space == spacing) {
                callback(x1, y1);
                space = 0;
            } else {
                space += 1;
            }
        }
    } else {
        var fraction = dx - (dy >> 1);

        while (y1 != y2) {
            if (fraction >= 0) {
                x1 += sx;
                fraction -= dy;
            }

            fraction += dx;
            y1 += sy;

            if (space == spacing) {
                callback(x1, y1);
                space = 0;
            } else {
                space += 1;
            }
        }
    }

    callback(x1, y1);
}

context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, 500, 400);

canvas.onmousemove = function(event) {
    x = parseInt(this.offsetLeft);
    y = parseInt(this.offsetTop);

    if (this.offsetParent != null) {
        x += parseInt(this.offsetParent.offsetLeft);
        y += parseInt(this.offsetParent.offsetTop);
    }

    if (navigator.appVersion.indexOf('MSIE') != -1) {
        x = (event.clientX + document.body.scrollLeft) - x;
        y = (event.clientY + document.body.scrollTop) - y;
    } else {
        x = event.pageX - x;
        y = event.pageY - y;
    }

    context.beginPath();
    if (drawing == true) {
        if (((x - prevX) >= spacing || (y - prevY) >= spacing) || (prevX - x) >= spacing || (prevY - y) >= spacing) {
            createFlow(x, y, prevX, prevY, function(x, y) {
                context.fillStyle = 'rgba(0, 0, 0, 0.1)';
                context.arc(x, y, size, 0, 2 * Math.PI, false);
                context.fill();
            });

            prevX = x, prevY = y;
        }
    } else {
        prevX = x, prevY = y;
    }
};

canvas.onmousedown = function() {
    drawing = true;
};

canvas.onmouseup = function() {
    drawing = false;
};

Solution

I've figured it out.

"context.beginPath();" needed to be in the createFlow callback function like so:

createFlow(x, y, prevX, prevY, function(x, y) {
    context.beginPath();
    context.fillStyle = 'rgba(0, 0, 0, 0.1)';
    context.arc(x, y, size, 0, 2 * Math.PI, false);
    context.fill();
});

Answered By - Coffee'd Up Hacker