Canvas save pixels out of view artifacting

Question

Я использую html5 canvas и javascript, чтобы нарисовать некоторые вещи на экране. Однако, поскольку то, что я рисую, иногда будет большим, у меня есть функция панорамирования.

Проблема заключается в том, что, когда чертеж выходит за пределы экрана в верхней или левой части, я получаю странный артефакт.

Я использую функцию toDataURL(), чтобы сохранить данные, полученные и перерисовывать его как изображение, используя drawImage().

Приложение находится в here.

Answer 1

Это происходит потому, что вы перетаскиваете его «ниже», чем граница рендеринга.

===================== 
emtpy with artifacts 
empty with artifacts 
_____________________________ 
start of your canvas drawing 

Поскольку пустое пространство не заполнено сплошным цветом, оно хранится как в буфере.

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