Changing canvas for drawing lines

Question

I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ but I want it to draw lines continuously without the circles but smooth lines. The code to be changed is below:

ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };

Answer 1

If i understand,you need this: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

This script draw a line from 0,0 to mouse.

window.event.clientX = mouse x coordinate window.event.clientY = mouse y coordinate

<script>
  context.beginPath();
  context.moveTo(0,0);
  context.lineTo(window.event.clientX,window.event.clientY);
  context.stroke();
</script>

Answer 2

You can use Bresenham's line algorithm to find all the points between the mouse start and end, and then fill the points between using fillRect. The reason you need to use the line algorithm is because if a user moves the mouse too fast you wont get solid lines, but lines with gaps. I modified your function quite a bit to do this. You can also pass a line thickness value to change how large you want the stroke to be. Note the same could be applied using arcs I just prefer rect

Live Demo

   (function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element

    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        canvas.lastX = 0;
        canvas.lastY = 0;
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;

        // define a custom fillCircle method
        ctx.fillCircle = function(x1, y1, x2, y2, fillColor, lineThickness) {
            this.fillStyle = fillColor;

            var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
            if (steep) {
                var x = x1;
                x1 = y1;
                y1 = x;

                var y = y2;
                y2 = x2;
                x2 = y;
            }
            if (x1 > x2) {
                var x = x1;
                x1 = x2;
                x2 = x;

                var y = y1;
                y1 = y2;
                y2 = y;
            }

            var dx = x2 - x1,
                dy = Math.abs(y2 - y1),
                error = 0,
                de = dy / dx,
                yStep = -1,
                y = y1;

            if (y1 < y2) {
                yStep = 1;
            }

            for (var x = x1; x < x2; x++) {
                if (steep) {
                    this.fillRect(y, x, lineThickness, lineThickness);
                } else {
                    this.fillRect(x, y, lineThickness, lineThickness);
                }

                error += de;
                if (error >= 0.5) {
                    y += yStep;
                    error -= 1.0;
                }
            }

        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
                return;
            }
            mouseX = e.pageX - this.offsetLeft;
            mouseY = e.pageY - this.offsetTop;

            ctx.fillCircle(mouseX,mouseY,canvas.lastX,canvas.lastY,"#000",1);

            canvas.lastX = mouseX;
            canvas.lastY = mouseY;

        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
            canvas.lastX = e.pageX - this.offsetLeft;
            canvas.lastY = e.pageY - this.offsetTop;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 200, 200, '#ddd');

})();​

​