Проблемы с моим приложением для рисования

Question

В моем приложении для рисования вы можете открыть несколько «рисовальных коробок» и нарисовать на каждой из них.В каждом из ящиков для рисования есть набор инструментов, в котором вы можете изменить цвет и размер кисти.

Приложение отлично работает, примите несколько вещей: 1. Когда вы открываете ящик для рисования и рисуете на нем, а затемоткройте новый и нарисуйте тот, что вы нарисовали на первом, пропало.Повторное выполнение, когда оба блока открыты, работает нормально (то, что вы нарисовали, остается на обоих боксах), но изменить цвет и размер можно только на одном из блоков (изменение цвета на одном блоке меняет цвет другого, и это не так.можно изменить цвет в этой коробке).2. То, что вы рисуете, становится неровным

Что может быть не так?

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

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

// code here that creates the toolbar with icons (if clicked on a red icon, color = red;)

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

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

$('.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').mousedown(function(e) {
    var ctx = this.getContext('2d');
    var canvasOffset = $(this).offset()
    $(this).data('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() {
    $('.paint').each(function () {
       $(this).data('letsdraw', false); 
    });
});