javascript - HTML Canvas - Create a Highlighter Effect - Stack Overflow

admin管理员组

文章数量:1414621

I am creating a two layer canvas. The bottom layer is a screenshot. The top layer is the drawing surface. I figured out a basic pen. I want to create a highlighter effect - meaning a larger line with a set opacity .5 or less. The problem I am having is that when I draw over the same area more than once the colors paint on top of each other. Eventually, the highlight will turn solid and block out the lower layer. I want to highlight evenly with the original color and be able to draw over existing highlights without the colors adding up.

I have been messing around with globalCompositeOperation but cannot get the desired results with the settings I have tried. Below i am trying color and using a globalAlpha setting. I have also tried using rgba colors. I also tried just using one layer, but I wanted to be able to clear doodles and erase easily so I went with two. Some of my source code is in the picture, but I'm not sure how helpful code is for my question. I can provide more if needed. Thanks.

EDIT: After using multiply as the globalCompositionOperation the color #FF0 aka yellow works great, among other colors. Some colors still have the original build-to-black effect, like the blue I use in the bottom picture. As a side note, these pictures are not to share my code, they are to show the highlighter effect. As a side note, this an Electron app so it is using Chromium ~ 61 at this time.

I am creating a two layer canvas. The bottom layer is a screenshot. The top layer is the drawing surface. I figured out a basic pen. I want to create a highlighter effect - meaning a larger line with a set opacity .5 or less. The problem I am having is that when I draw over the same area more than once the colors paint on top of each other. Eventually, the highlight will turn solid and block out the lower layer. I want to highlight evenly with the original color and be able to draw over existing highlights without the colors adding up.

I have been messing around with globalCompositeOperation but cannot get the desired results with the settings I have tried. Below i am trying color and using a globalAlpha setting. I have also tried using rgba colors. I also tried just using one layer, but I wanted to be able to clear doodles and erase easily so I went with two. Some of my source code is in the picture, but I'm not sure how helpful code is for my question. I can provide more if needed. Thanks.

EDIT: After using multiply as the globalCompositionOperation the color #FF0 aka yellow works great, among other colors. Some colors still have the original build-to-black effect, like the blue I use in the bottom picture. As a side note, these pictures are not to share my code, they are to show the highlighter effect. As a side note, this an Electron app so it is using Chromium ~ 61 at this time.

• javascript
• canvas

Share Improve this question Follow edited Sep 12, 2018 at 5:36 benjaminadk asked Sep 10, 2018 at 14:11 benjaminadkbenjaminadk 49866 silver badges1919 bronze badges 6

• 3 post your code as text and not as image – Lelio Faieta Commented Sep 10, 2018 at 14:13
• 2 @LelioFaieta how is he suppose to illustrate the yellow highlights with just text? – user1693593 Commented Sep 11, 2018 at 20:10
• thanks @epistemex. hopefully they just misunderstood my original post...but yah I am showing the problem. I did mention that this isnt really a code problem, either someone knows how to do this effect or they dont. – benjaminadk Commented Sep 12, 2018 at 5:06
• By adding the picture side by side with the code? As everyone here usually does – Lelio Faieta Commented Sep 12, 2018 at 6:43
• No idea why all these people would downvote this, it's a perfectly good question. I'm trying to acplish the same thing, but unfortunately using Multiply isn't working for me, it looks slightly better than default but it still gets darker as you drag the mouse over the same spot multiple times. I'm creating a way for students to annotate online learning worksheets, and highlighting text is a feature I need, but the text should always show through the highlight. Any suggestions? Did the behavior of Multiply change? – Jim Commented May 14, 2020 at 13:47

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

The normal way to create a highlighter effect is to use the blending mode "multiply".

This will be like on real paper (subtractive light, not technically but in appearance) so drawing on a dark background will produce an almost invisible highlighter effect.

Note that not all browsers support blending modes (this includes <= IE11).

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>

On dark background:

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>

本文标签： javascriptHTML CanvasCreate a Highlighter EffectStack Overflow