{"id":13445943,"url":"https://github.com/Phrogz/context-blender","last_synced_at":"2025-03-21T05:31:19.064Z","repository":{"id":1208606,"uuid":"1120805","full_name":"Phrogz/context-blender","owner":"Phrogz","description":"Photoshop-style blend modes for HTML Canvas Contexts","archived":false,"fork":false,"pushed_at":"2018-07-26T17:37:03.000Z","size":1517,"stargazers_count":623,"open_issues_count":10,"forks_count":65,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-03-19T22:49:27.518Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Phrogz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-11-29T02:58:55.000Z","updated_at":"2025-03-18T14:37:51.000Z","dependencies_parsed_at":"2022-08-16T12:35:20.137Z","dependency_job_id":null,"html_url":"https://github.com/Phrogz/context-blender","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Phrogz%2Fcontext-blender","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Phrogz%2Fcontext-blender/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Phrogz%2Fcontext-blender/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Phrogz%2Fcontext-blender/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Phrogz","download_url":"https://codeload.github.com/Phrogz/context-blender/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244745711,"owners_count":20503047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:00:42.245Z","updated_at":"2025-03-21T05:31:18.553Z","avatar_url":"https://github.com/Phrogz.png","language":"JavaScript","funding_links":[],"categories":["Libraries","JavaScript"],"sub_categories":["Image processing"],"readme":"## About\n\nAdobe® Photoshop® has a variety of helpful [blend modes](http://helpx.adobe.com/photoshop/using/blending-modes.html) for compositing images from multiple RGBA layers. This small library provides the same functionality for HTML Canvas Contexts, with the goal of producing the same results as Photoshop.\n\n## Syntax\n\n    overContext.blendOnto( underContext, blendMode, offsetOptions );\n      - overContext   : A CanvasRenderingContext2D\n      - underContext  : A CanvasRenderingContext2D\n      - blendMode     : A string with the blend mode to use, e.g. 'screen'\n      - offsetOptions : [optional] JS Object with some/all of the following keys:\n          destX, destY\n          The X/Y location in the 'underContext' to blend onto; both default to 0.\n\n          sourceX, sourceY\n          The X/Y location in the 'overContext' to blend from; both default to 0.\n\n          width,height\n          The size of the box to blend; both default to 'auto', blending up to the\n          right and bottom edges of the 'over' context.\n\n          Width and height may less than specified if there is not enough space\n          on the over or under contexts to fit the blend.\n\n\n## Use\n\n### In Node.js\n\n1. Install the node module\n\n        npm install context-blender\n\n   This will also install node-canvas, which requires a working Cairo install.\n   See https://github.com/Automattic/node-canvas#installation for more details.\n\n2. Use the library like so in the scripts:\n\n    ```javascript\n    // Requires the canvas library and augments it for you\n    var Canvas = require('context-blender');\n\n    var over  = new Canvas(100,100).getContext('2d');\n    var under = new Canvas(100,100).getContext('2d');\n\n    // …drawing something to both canvas contexts, and then:\n\n    // Blend all of 'over' onto 'under', starting at the upper left corner\n    over.blendOnto(under,'screen');\n\n    // Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under'\n    over.blendOnto(under,'multiply',{destX:17,destY:42});\n\n    // Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under'\n    over.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16});\n    ```\n\n### In a Web Browser\n\n```javascript\n// Likely an 'offscreen' (not in the DOM) canvas\nvar over = someCanvas.getContext('2d');\n\n// Usually a canvas that is shown on the page\nvar under = anotherCanvas.getContext('2d');\n\n// Blend all of 'over' onto 'under', starting at the upper left corner\nover.blendOnto(under,'screen');\n\n// Blend all of 'over' onto 'under' (again), starting at 17,42 in 'under'\nover.blendOnto(under,'multiply',{destX:17,destY:42});\n\n// Blend a 16x16 tile from 'over' onto 'under' (again), starting at 17,42 in 'under'\nover.blendOnto(under,'add',{destX:17,destY:42,sourceX:32,sourceY:128,width:16,height:16});\n```\n\n\n## Supported Blend Modes\n\nThe 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):\n\n * `normal` (or `src-over`)\n * `src-in`\n * `screen`\n * `multiply`\n * `difference`\n * `exclusion`\n\nThe following additional blend modes mostly work as intended, but have issues when it comes to dealing with low-opacity colors.\n\nTest images are the result of blending  \n![](test/over.png)  \nover top of  \n![](test/under.png)  \n(where the \"lighter\" repetitions are the result of lowered opacity).\n\n * `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)\n   on the opacities of the two layers. I have not yet figured out what it does instead.\n   For now, this mode performs simple numeric addition, the same as the SVG 1.2 \"plus\" mode. \n     \n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/add-ideal.png) | ![](test/add-actual.png) |\n * `lighten` (or `lighter`) - the result is _slightly_ too dark when the opacity falls and incorrectly 'favors' a higher-opacity source.\n\n   | Photoshop | context-blender |\n   | --- | --- |\n   | ![](test/lighten-ideal.png) | ![](test/lighten-actual.png) |\n * `darken` (or `darker`) - the result is too dark when combining low-opacity regions, and does not properly 'favor' the higher-opacity source.\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/darken-ideal.png) | ![](test/darken-actual.png) |\n * `overlay` - this is correct where both the over and under images are 100% opaque; the lower the alpha of either/both images, the more the colors become too desaturated.\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/overlay-ideal.png) | ![](test/overlay-actual.png) |\n * `hardlight` - this is the opposite of \"overlay\" and experiences similar problems where either image is not fully opaque.\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/hardlight-ideal.png) | ![](test/hardlight-actual.png) |\n * `colordodge` (or `dodge`) - works correctly only under 100% opacity\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/colordodge-ideal.png) | ![](test/colordodge-actual.png) |\n * `colorburn` (or `burn`) - works correctly only under 100% opacity\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/colorburn-ideal.png) | ![](test/colorburn-actual.png) |\n * `softlight`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/softlight-ideal.png) | ![](test/softlight-actual.png) |\n * `luminosity`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/luminosity-ideal.png) | ![](test/luminosity-actual.png) |\n * `color`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/color-ideal.png) | ![](test/color-actual.png) |\n * `hue`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/hue-ideal.png) | ![](test/hue-actual.png) |\n * `saturation`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/saturation-ideal.png) | ![](test/saturation-actual.png) |\n * `lightercolor`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/lightercolor-ideal.png) | ![](test/lightercolor-actual.png) |\n * `darkercolor`\n\n\t| Photoshop | context-blender |\n\t| --- | --- |\n\t| ![](test/darkercolor-ideal.png) | ![](test/darkercolor-actual.png) |\n\n\n\n## Requirements/Browser Support\n\nShould work on any user agent that supplies a `CanvasRenderingContext2D` along with `getImageData` and `putImageData`.\n\nThis includes using the [`node-canvas`](https://github.com/Automattic/node-canvas) library under [Node.js](http://nodejs.org).\n\n\n## About\n\nThis library was created around the need solely for a one-off 'screen' blend mode to match the company-mandated style for bar graphs used internally, previously only available via a Microsoft® Excel® template. Clearly this functionality is useful in more contexts than just my one-off, so I decided to make a framework around it and encourage others to help figure out the formulae. Please, fork this project, add blend modes and/or fix math, and send me pull requests! I feel certain that the resources must exist out there on the equations Photoshop uses in the presence of alpha, but so far I have not found them.\n\n### History\n\n#### v1.3.3 - 2014-Nov-13\n+ Fix alpha on all blend modes to exactly match Photoshop.\n\n#### v1.3.0 - 2014-Nov-12\n+ Release as a Node.js module.\n+ Add blend modes: `softlight`, `luminosity`, `color`, `hue`, `saturation`, `lightercolor`, `darkercolor`.\n+ Greatly improve the accuracy of many blend modes.\n\n_Great thanks to [Pixelero](http://pixelero.wordpress.com) for amazing contributions!_\n\n#### v1.2.1 - 2011-Feb-9\n+ Improve perf of `lighten` and `darken` blend modes.\n\n#### v1.2.0 - 2010-Dec-14\n+ Add blend modes: `hardlight`, `colordodge`, `colorburn`, `darken`, `lighten`, `exclusion`. _Thanks [gingerbeardman](https://github.com/gingerbeardman)!_\n\n#### v1.1.1 - 2010-Dec-12\n+ Improve result of `overlay` blend mode.\n\n#### v1.1.0 - 2010-Dec-6\n+ Added array `blendOnto.supportedBlendModes` for enumerating modes.\n+ Added object `blendOnto.supports` for testing if a mode is supported.\n+ Test for `getImageData()` to be present (prevent loading on excanvas).\n\n#### v1.0 - 2010-Nov-30\n+ Initial working release.\n+ Supported blend modes: `normal`, `screen`, `multiply`, `difference`, `src-in`, `add`\n- Known broken: `overlay`, `dodge`\n\n## Reference Material\n* [PDF Blend Modes: Addendum (January 23, 2006)](http://www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/pdf_reference_archives/blend_modes.pdf) PDF\n* [SVG Compositing 1.2, Part 1: Primer](http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html)\n* [Custom blend modes for Flash 10](http://www.lostinactionscript.com/blog/index.php/2009/05/26/custom-blend-modes-for-flash-10/) blog post\n* [Blend Modes in Delphi](http://www.pegtop.net/delphi/articles/blendmodes/) blog post\n\n### Contact\n\nTo report bugs or request additional features, please use the [Context-Blender Issues](http://github.com/Phrogz/context-blender/issues) page for this project.\n\n### License\n\nThis library is released under an MIT-style license. That generally means that you are free to do almost anything you want with it as long as you give a bit of credit where credit is due. See the LICENSE file included for the actual legal limitations.s and/or fix math, and send me pull requests! I feel certain that the resources must exist out there on the equations Photoshop uses in the presence of alpha, but so far I have not found them.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPhrogz%2Fcontext-blender","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPhrogz%2Fcontext-blender","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPhrogz%2Fcontext-blender/lists"}