Проблемы с производительностью, когда высота холста слишком велика

Question

Я не знаю, есть ли у моей проблемы решение, но поехали.

У меня есть экран с таблицей в виде простого текста и холст, покрывающий таблицу, чтобы позволить пользователю делать заметки с помощью планшета.
Проблема в том, что размер таблицы значительно увеличился, что сделало функцию рисования очень медленной.
Есть ли способ увеличить высоту холста без потери производительности?

Вот мой код:

$(window).on("load", function() {
    $("#canvas")
        .attr({
            height: $("#table").height(),
            width: $("#table").width()
        })
        .css({
            top: $("#table").offset().top
        })
        .on({
            draw: function() {
                var context = this.getContext("2d");

                context.beginPath();
                context.moveTo($(this).attr("lastX"), $(this).attr("lastY"));
                context.lineTo($(this).attr("currX"), $(this).attr("currY"));
                context.lineJoin = "round";
                context.lineWidth = $("#lineWidth").val();
                context.strokeStyle = $("#pickedColor").val();
                context.closePath();

                context.stroke();
            },
            erase: function() {
                var context = this.getContext("2d"),
                    radius = $("#lineWidth").val() * 2;

                context.save();
                context.beginPath();
                context.arc($(this).attr("currX"), $(this).attr("currY"), radius, 0, 2 * Math.PI, true);
                context.clip();
                context.clearRect($(this).attr("currX") - radius, $(this).attr("currY") - radius, radius * 2, radius * 2);
                context.restore();
            },
            "mousedown pointerdown": function(evt) {
                $(this).attr({
                    currX: evt.pageX - this.offsetLeft,
                    currY: evt.pageY - this.offsetTop,
                    lastX: evt.pageX - this.offsetLeft - 1,
                    lastY: evt.pageY - this.offsetTop - 1
                });

                if (!$("#pickedColor").val()) {
                    $(this).trigger("erase");
                } else {
                    $(this).trigger("draw");
                }

                $(this).data("active", true);
            },
            "mousemove pointermove": function(evt) {
                if ($(this).data("active")) {
                    $(this).attr({
                        currX: evt.pageX - this.offsetLeft,
                        currY: evt.pageY - this.offsetTop,
                        lastX: $(this).attr("currX"),
                        lastY: $(this).attr("currY")
                    });

                    if (!$("#pickedColor").val()) {
                        $(this).trigger("erase");
                    } else {
                        $(this).trigger("draw");
                    }
                }
            },
            "mouseup pointerup": function() {
                $(this).data("active", false);
            }
        });
});

С тех пор, спасибо всем за помощь.