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

mix-blend-mode not rendered #580

Open
Cristian-L opened this Issue Apr 25, 2015 · 7 comments

Comments

Projects
None yet
6 participants
@Cristian-L

Cristian-L commented Apr 25, 2015

I am trying to use mix-blend-mode on some of the divs to get some nice effects. However, html2canvas does not render it at all. Any suggestions or workarounds, please?

@brcontainer

This comment has been minimized.

Contributor

brcontainer commented Sep 13, 2015

Please read this:

https://github.com/niklasvh/html2canvas#browser-compatibility

As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.

I hope it is possible to implement this in the near future :)

@jackuro

This comment has been minimized.

jackuro commented Jan 3, 2017

hi cristian have the same issue, did you found any solution?

@brcontainer

This comment has been minimized.

Contributor

brcontainer commented Jan 3, 2017

@jackuro

This comment has been minimized.

jackuro commented Jan 3, 2017

i see it already looks like the render does the image solid forgetin the css mix-blend-mode how can i fix that? its not a browser problem, thank you @brcontainer @niklasvh

@brcontainer

This comment has been minimized.

Contributor

brcontainer commented Jan 4, 2017

@jackuro There is no way to fix something that has not been implemented. I really think there is a lack of collaboration in the project, there are many "forks", but few "pullrequests" that are useful. :(

@niklasvh niklasvh added the Feature label Dec 11, 2017

@egfx

This comment has been minimized.

egfx commented Aug 1, 2018

I really wonder if mix-blend-mode is possible. It would be a very welcome addition. Any hints on where to start the implementation?

@MatthijsMud

This comment has been minimized.

MatthijsMud commented Oct 1, 2018

CanvasRenderingContext2D has a property that could possibly be used for the desired effect: globalCompositeOperation. All allowed values for mix-blend-mode are valid values for the given property.

Setting the property when the browser doesn't support it, should be no different from the current implementation. In that regard it has a nice fallback. So I expect something akin to the following is all that is needed to implement the feature.

var temp = ctx.globalCompositeOperation;
ctx.globalCompositeOperation = window.getComputedStyle(node).mixBlendMode;

// ...

ctx.globalCompositeOperation = temp;

As to where this piece of code needs to be placed... I have little to no idea, given I'm not all that well versed in the project (yet). It should be before the element and its children are rendered, at which point more properties are likely to be set.

Another issue, pertaining background-blend-mode, can probably be solved in a similar way; the moment the context is restored differs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment