Paint w canvas (JavaScript), jak pobrać wartość kursora do zmiennej aby stworzyć dowolny kwadrat za pomocą myszy

Question

Siema mam pytanie, jak narazie zrobiłem painta w którym można rysować krzywe o różnych kolorach i rozmiarach, do tego mozna pobierac te pliki. Chce dodać funkcje rysowania dowolnych kwadratów za pomoca myszki jak w Paincie. Ogółem kwadraty mi się tworzą lecz polega to w ten sposób że im dalej od punktu x,y(0,0) tym kwadrat większy a nie o to chodzi. Trzeba po kliknięciu myszy pobrać współrzędne gdzie zaczyna się kwadrat, potem zapewne za pomocą instrukcji if określić w którą strone rysujemy kwadrat i wynikiem jego boków będzie suma obu tych stałych + odległość od nich. Czy ktoś wie jak to zrobić? Aby pobrać te wartości a nastepnie wyliczyć od nich odległość aby zapisać to jako wzór matematyczny w funkcji ?

Answer 1

Pobranie pozycji myszy na canvas:

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
    };
}

Przykład pochodzi z wątku SO: http://stackoverflow.com/questions/17130395/real-mouse-position-in-canvas