[Siend]

НЕ ПУГАЙТЕСЬ ЧТО МНОГО ТЕКСТА, ТУТ ВСЕ ПРОСТО!!!

Решил попытаться переписать свой код, и столкнулся с огромным провалом в понимании ООП в javascript, связи с чем прошу вашей помощи в создании эдакого мануала.

Я работаю с элементам canvas, но думаю что логика подхода применительно к обычному диву будет такой же. Но не суть, ближе к делу.

Пусть у нас будут даны несколько элементов canvas:

...
<canvas id="canvasA"></canvas>
<canvas id="canvasB"></canvas>
<canvas id="canvasC"></canvas>
...

и располагаем мы таким набором говнокода (написанным применительно для одного canvas):

function init() { //функция инициализации canvas
        canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
    }
...
function animate() { //функция запускающая отрисовку
        requestAnimationFrame(animate);
        draw();
    }

//координаты мыши относительно элемента канвас
var xMouse=0
var yMouse=0
var HOLD=false
var WIDTH = canvas.offsetWidth
var HEIGHT = canvas.offsetHeight

function draw(){ //отрисовка
        ctx.beginPath();
        ctx.rect(0, 0, WIDTH , HEIGHT ); // очистка экрана
        ctx.fill();
        ctx.stroke();
        if (HOLD==false)
                ctx.strokeText(xMouse + " " + yMouse, 10, 10) // 10 10 -точка вывода координат мыши. 
        if (HOLD==true)
                ctx.strokeText("Click is true", 10, 10)
}

//обработчики:
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
canvas.onmousemove = myMove;

function myUp(e) { HOLD = false }
function myDown(e) { HOLD = true}
function myMove(e) {
        xMouse = e.pageX - canvas.offsetLeft
        yMouse = e.pageY - canvas.offsetTop
}

Итак, это пожалуй все что нам понадобиться.

Задача:
отображать на каждом canvas координаты xMouse, yMouse (координаты мышки относительно этого канваса, а не всей страницы), а в случае клика выводить надпись (как видите в случае клика меняется значение переменной HOLD, а в функции отрисовки есть проверка этой переменной)

Сложность:
Все что я написал действительно является ничем иным как говнокодом, который можно применить к одному единственному элементу canvas, я же хочу сделать универсальный конструктор, но не знаю как, и в этом прошу вашей помощи. Думаю этот урок может быть полезен и другим новичкам js в будущем!