Question

I can create lines but I want to create it like you can change the direction of it and size of line anyway like http://devfiles.myopera.com/articles/649/example5.html in this link.

This is my code

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
$("canvas").mousedown(function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var a = x;
    var b = y;
    context.beginPath();
    context.lineWidth = 2;
    context.lineCap = "round";
    context.moveTo(a, b);
    $("canvas").mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        context.lineTo(x, y);
        context.stroke();
    });
    $("canvas").mouseup(function(e) {
        $("canvas").unbind("mousemove").unbind("mouseup");
    });
});

Also you can look from.
http://jsfiddle.net/nSnDC/ How can I solve it

Answer 1

http://devfiles.myopera.com/articles/649/example5.js

The answer is just one short step away….

Basically you need to clean the line drawn every time the mouse move (your script failed to do so).