Маленький живой просмотр холста FabricJS в другом элементе холста

Question

У меня есть доска изображений, использующая отличную библиотеку FabricJS. Я пытаюсь создать своего рода «замочная скважина» вид «Предварительный просмотр» на другой холст, который находится на странице, копирование небольшой участок холста fabricJS и отображение его на второй холст с помощью context.drawImage()

preview_canvas_context.drawImage(fabric.lowerCanvasEl, x,y, ...) 

Это отлично работает! Моя проблема связана с копированием изображения. Я не уверен, какие фантастические вещи FabricJS делают в фоновом режиме, но если у меня есть пустое место за изображением или объектом на холсте ткани (или я достигаю края холста), то скопированное изображение смазывается, как показано на рис. следующий снимок экрана:

Почему это происходит, и что я могу сделать, чтобы исправить это?

Answer 1

Установка фонового изображения или цвета на холсте предотвращает возникновение этой проблемы.

var canvas = new fabric.Canvas('c', { 
    backgroundColor: 'rgb(255,255,255)' 
}); 

Я все еще получаю изображение размазывания, когда я оставляю за пределами периметра, но это, как ожидается, и предотвратить, установив границы, что объект видового экрана не может уйти.