HTML Canvas - создайте эффект выделения

Question

Я создаю двухслойный холст. Нижний слой - скриншот. Верхний слой - это поверхность для рисования. Я разобрался с основной ручкой. Я хочу создать эффект выделения, то есть большую линию с заданной непрозрачностью 0,5 или менее. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я рисую над одной и той же областью несколько раз, цвета накладываются друг на друга. В конце концов, подсветка станет твердой и заблокирует нижний слой. Я хочу равномерно выделить исходный цвет и иметь возможность рисовать поверх существующих бликов без добавления цветов.

Я возился с globalCompositeOperation, но не могу получить желаемые результаты с настройками, которые я пробовал. Ниже я пытаюсь color и использую настройку globalAlpha. Я также пытался использовать rgba цвета. Я также пытался использовать только один слой, но я хотел иметь возможность очищать каракули и легко стирать, поэтому я выбрал два. Часть моего исходного кода изображена на картинке, но я не уверен, насколько полезен код для моего вопроса. Я могу предоставить больше, если это необходимо. Спасибо.

РЕДАКТИРОВАТЬ: После использования multiply в качестве globalCompositionOperation цвет #FF0 он же желтый прекрасно работает, среди других цветов. Некоторые цвета по-прежнему имеют оригинальный эффект построения на черный, например синий, который я использую на нижнем рисунке. Как примечание, эти картинки не для того, чтобы делиться моим кодом, они должны показать эффект подсветки. В качестве примечания, это приложение Electron, поэтому в настоящее время используется Chromium ~ 61.

Answer 1

Обычный способ создать эффект выделения - использовать режим смешивания «умножение».

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

Обратите внимание, что не все браузеры поддерживают режимы наложения (включая <= IE11). </p>

const ctx = c.getContext("2d");
ctx.globalCompositeOperation = "multiply";
ctx.font = "40px sans-serif";
ctx.fillText("HIGHLIGHT ME", 5, 84);        // replace with bg image
ctx.fillStyle = "#ff0";
c.onmousemove = e => ctx.fillRect(e.clientX-10, e.clientY-10, 20,20);

html, body {margin:0}
#c {border:1px solid}

<canvas id=c></canvas>

На темном фоне:

const ctx = c.getContext("2d");
ctx.fillStyle = "#333";
ctx.fillRect(0,0,c.width,c.height);
ctx.font = "40px sans-serif";
ctx.fillStyle = "#fff";
ctx.fillText("HIGHLIGHT ME", 5, 84);        // replace with bg image
ctx.fillStyle = "#ff0";
ctx.globalCompositeOperation = "multiply";
c.onmousemove = e => ctx.fillRect(e.clientX-10, e.clientY-10, 20,20);

html, body {margin:0}
#c {border:1px solid}

<canvas id=c></canvas>