Использование globalCompositeOperation для ограниченного числа изображений

Question

У меня очень простой вопрос: возможно ли использовать globalCompositeOperation только для ограниченного числа изображений?

Например, я рисую много вещей на холсте. И вдобавок ко всему, и завершенный, не связанный, я хочу выполнить некоторые операции над двумя изображениями (и я просто хочу, чтобы отображался результат, а не оба изображения). Как это можно сделать?

На данный момент выполнение таких операций влияет на все, что уже нарисовано ниже.

Таким образом, решение, которое я нашел, заключается в выполнении операций на другом холсте, который я отображаю поверх моего основного, первого холста. Но это выглядит плохо. Во-первых, это поражает выступлениями. Тогда это не кажется интуитивным. И наконец, я теряю контроль над слоями: все, что находится на моем втором холсте, всегда будет поверх первого холста.

Это похоже на довольно простую функцию, я надеюсь, что я просто плохо гуглю!

Большое спасибо!

Answer 1

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

Создать закадровый холст

function createCanvas(w,h){
      var canvas = document.createElement("canvas");
      canvas.width = w;
      canvas.height = h;
      canvas.ctx = ctx.getContext("2d");
      return canvas;
}

Это просто, и тогда вы просто воспринимаете это как образ. Рисовать на другой холст

var offScreenCan = createCanvas(1024,1024);
offScreenCan.ctx.drawImage(myImage);  // put something on the canvas
ctx.drawImage(offScreenCan,0,0);  // draw that canvas to another

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