Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blendmode (multiply) not working correctly with stroked texts #2054

Open
petbuc16 opened this issue Nov 15, 2023 · 0 comments
Open

Blendmode (multiply) not working correctly with stroked texts #2054

petbuc16 opened this issue Nov 15, 2023 · 0 comments

Comments

@petbuc16
Copy link

Description/Steps to reproduce

I have created a sketch, where the problem is shown appropriatly:

  • When working with stroked texts, and applying a blendmode, the globalCompositeOperation seems to be only applied to the fill text.

Have attached some examples:

paper.js

Change the "blendMode" on line 22 to 'mulitply' and see the differnce (what indicates my problem)

Paper.js Sketch

Canvas2DRenderingContext

Native canvas seems to be doing what I am trying

canvas blend modes

SVG

Also svg seems to work fine
Free SVG Download, Blendmode. Free SVG and PNG Vector Icons.

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .bg {
        mix-blend-mode: multiply;
    }
  </style>

  <rect x="0" y="0" width="240" height="240" fill="gray">  </rect>
  <text class="bg" x="20" y="35" class="small" stroke="magenta" stroke-width="8" >[Caption]</text>
  <text x="20" y="35" class="small">[Caption]</text>
</svg>

Can someone pls provide a workaround (or am I using it incorrectly)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant