Рисование на холсте не работает

Question

В приложении, над которым я работаю, должна быть возможность открыть несколько блоков div и нарисовать каждый из них (например, MS Paint Light).

Мне удалось открыть одну коробку и нарисовать на ней, но когда я сменил холст "id" на холст "класс" (чтобы открыть несколько коробок и рисовать на каждой из них), он перестал работать. Теперь, когда я пытаюсь рисовать, ничего не происходит. Что я делаю не так?

var color = "red";
var shape = "square";
var size = 10;

var theWindow = $('.window').last();
var bottomWindow = $('.windowBottom').last();

var letsdraw = false;
var theCanvas = $('.paint').last();

var ctx = theCanvas.getContext('2d');
ctx.strokeStyle = 'red';
theCanvas.width  = 430;
theCanvas.height = 317;

var canvasOffset = $(theCanvas).offset();

$(theCanvas).mousemove(function(e) {
    if (letsdraw === true) {
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

$(theCanvas).mousedown(function(e) {
    letsdraw = true;
    ctx.strokeStyle = color;
    ctx.lineWidth = size;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});

$(window).mouseup(function() {
    letsdraw = false;
});

Answer 1

Эта проблема в том, что вы по-прежнему рассматриваете его как один холст.

$('.paint').mousemove(function(e) {
    if (letsdraw === true) {
        var ctx = this.getContext('2d');
        var canvasOffset = $(this).offset();
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

Поэтому я удалил theCanvas и использовал this для ссылки на холст.Нажмите на демонстрационную ссылку, чтобы увидеть ее в действии:

Демо

Еще некоторые правки с использованием данных attr:

// using data attr to store lets draw per canvas
$(window).mouseup(function() {
    $('.paint').each(function () {
       $(this).data('letsdraw', false); 
    });
});

$('.paint').mousemove(function(e) {
    if ($(this).data('letsdraw') === true) {
        var ctx = this.getContext('2d');
        var canvasOffset = $(this).offset();
        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
        ctx.stroke();
    }
});

Изменение высоты и ширины:

$('.paint').each(function () {
    this.width = 430;
    this.height = 20
})

Я делаю это только один раз, потому что изменение высоты / ширины холста фактически стирает весь рисунок.