HTML5 Canvas Line Проблема

Question

Я могу создать линии, но я хочу создать их так, как вы можете изменить направление и размер линии в любом случае, например, http://devfiles.myopera.com/articles/649/example5.html в этой ссылке.

Это мой код

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

Также вы можете посмотреть с.http://jsfiddle.net/nSnDC/ Как я могу это решить

Answer 1

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

Ответ находится всего в нескольких шагах ....

Обычно вам нужно чистить линию, проводимую каждый раз, когда мышь двигается (ваш скрипт не смог этого сделать).