Skip to content

Commit fa373c3

Browse files
committed
Update README for v1.3
1 parent f2584d5 commit fa373c3

File tree

1 file changed

+19
-21
lines changed

1 file changed

+19
-21
lines changed

README.md

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ Adobe® Photoshop® has a variety of helpful [blend modes](http://help.adobe.com
2525

2626
## Use
2727

28+
### In Node.js
29+
30+
npm install context-blender
31+
32+
Will install node-canvas, which requires a working Cairo install.
33+
See https://github.com/Automattic/node-canvas#installation for more details.
34+
35+
### In a Web Browser
36+
2837
// Likely an 'offscreen' (not in the DOM) canvas
2938
var over = someCanvas.getContext('2d');
3039

@@ -46,42 +55,31 @@ Adobe® Photoshop® has a variety of helpful [blend modes](http://help.adobe.com
4655
The following blend modes work perfectly (or as nearly as the [vagaries of the HTML Canvas](http://stackoverflow.com/questions/4309364/why-does-html-canvas-getimagedata-not-return-the-exact-same-values-that-were-ju) allow):
4756

4857
* `normal` (or `src-over`)
58+
* `src-in`
4959
* `screen`
5060
* `multiply`
5161
* `difference`
62+
* `exclusion`
5263

53-
These blend modes mostly work as intended, but have issues when it comes to dealing with the alpha channel:
54-
55-
* `exclusion` - very subtle color differences (slightly too bright) under limited circumstances.
56-
57-
* `src-in` - the output of this blend mode is slightly different from the effect
58-
of applying the transparency of one layer as a mask to another; the difference only appears
59-
in low-opacity areas, however.
60-
* ![comparison of result versus intended for src-in blend mode](http://phrogz.net/tmp/context-blender_src-in.png)
64+
The following additional blend modes mostly work as intended, but have issues when it comes to dealing with the alpha channel:
6165

6266
* `add` (or `plus`) - Photoshop's _"Linear Dodge (add)"_ blend mode [does not perform addition](http://www.neilblevins.com/cg_education/additive_mode_in_photoshop/additive_mode_in_photoshop.htm)
6367
on the opacities of the two layers. I have not yet figured out what it does instead.
6468
For now, this mode performs simple numeric addition, the same as the SVG 1.2 "plus" mode.
65-
* ![comparison of result versus intended for add blend mode](http://phrogz.net/tmp/context-blender_add.png)
66-
6769
* `lighten` (or `lighter`) - the result is _slightly_ too dark when the opacity falls and incorrectly 'favors' a higher-opacity source.
68-
* ![comparison of result versus intended for lighten blend mode](http://phrogz.net/tmp/context-blender_lighten.png)
69-
7070
* `darken` (or `darker`) - the result is too dark when combining low-opacity regions, and does not properly 'favor' the higher-opacity source.
71-
* ![comparison of result versus intended for darken blend mode](http://phrogz.net/tmp/context-blender_darken.png)
72-
7371
* `overlay` - this is only correct where both the over and under images are 100% opaque; the lower the alpha
7472
of either/both images, the more the colors get clamped, resulting in high contrast.
75-
* ![comparison of result versus intended for add blend mode](http://phrogz.net/tmp/context-blender_overlay.png)
76-
7773
* `hardlight` - this is the opposite of "overlay" and experiences similar problems when either image is not fully opaque.
78-
* ![comparison of result versus intended for hard light blend mode](http://phrogz.net/tmp/context-blender_hardlight.png)
79-
8074
* `colordodge` (or `dodge`) - works correctly only under 100% opacity
81-
* ![comparison of result versus intended for dodge blend mode](http://phrogz.net/tmp/context-blender_dodge.png)
82-
8375
* `colorburn` (or `burn`) - works correctly only under 100% opacity
84-
* ![comparison of result versus intended for burn blend mode](http://phrogz.net/tmp/context-blender_burn.png)
76+
* `softlight`
77+
* `luminosity`
78+
* `color`
79+
* `hue`
80+
* `saturation`
81+
* `lightercolor`
82+
* `darkercolor`
8583

8684
## Requirements/Browser Support
8785

0 commit comments

Comments
 (0)