Почему сохранение и восстановление используются при тонировании этого изображения?

Question

Я нашел этот код для тонировки файла изображения в холсте. Мне интересно, что такое ctx.save и ctx.restore для этого контекста оттенков? Зачем это нужно здесь?

JS FIDDLE

 function recolor(color) { 
     ctx.save(); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(pic, 0, 0); 
     ctx.globalCompositeOperation = "source-in"; 
     ctx.fillStyle = color; 
     ctx.rect(0, 0, canvas.width, canvas.height); 
     ctx.fill(); 
     ctx.restore(); 
     var img = new Image(); 
     img.src = canvas.toDataURL(); 
     return (img); 
    } 

Answer 1

save и restore используются для сохранения и восстановления всех контекста состояния, такие как fillStyle, lineWidth, globalCompositeOperation, вырезанную область, текущая матрица контекста преобразования, и так далее.

Единственная необходимая цель save и restore в вашей скрипке - сбросить globalCompositeOperation.

Вы можете сделать это вручную, вместо этого:

function recolor(color) { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(pic, 0, 0); 
     ctx.globalCompositeOperation = "source-in"; 
     ctx.fillStyle = color; 
     ctx.rect(0, 0, canvas.width, canvas.height); 
     ctx.fill(); 

     //instead of save and restore: 
     ctx.globalCompositeOperation = "source-over"; 

     var img = new Image(); 
     img.src = canvas.toDataURL(); 
     return (img); 
    } 

В общем, вы должны избегать использования save и restore, если вы абсолютно необходимо, так как он может получить вычислительно дорого.

Answer 2

CTX сохранения и восстановления используются для сохранения текущего состояния контекста. Это обычно используется в функциях, чтобы вы могли их вызывать в любом месте и не беспокоиться о том, что он изменит состояние рисования вне функции.

Так, например, в этом коде вы меняете fillStyle. После вызова ctx.restore стиль заполнения вернется к тому, что было, когда был вызван ctx.save.