Inset shadows for HTML's <canvas> element.

Trying to draw inset shadows using the HTML Canvas API can be suprisingly difficult, often requiring obscure techniques like duplicating your drawing code, using the clip method, or "opposite winding".

In contrast, Inset.js requires only a single line of code, and does not require you to duplicate any code. See the Inset! section for more details. This is achieved by a combination of an off-screen canvas for some fancy alpha inversion (inspired by this StackOverflow post), along with monkey-patching a few select methods on CanvasRenderingContext2D.

Inset.js currently supports inset shadows on shapes drawn with fillRect, shapes drawn with drawImage, or shapes drawn using the path functions (beginPath, moveTo, lineTo, arc, arcTo, etc.) and then fill.

Inset.js was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6 and bundle modules. For a minimal boilerplate that does so, check out outset.

Using NPM, install Inset.js, and add it to your package.json dependencies.

npm install inset.js --save

Then import Inset.js in your main JavaScript file. Do not bind any variables, as Inset.js does all its work in the background and does not export anything.

import 'inset.js'

If you are not using a build system capable of transpiling ES6 and bundling modules, you can just include Inset.js directly:

<!-- Include Inset.js -->
<script src="/dist/inset.browser.js"></script>

Simply set

ctx.shadowInset = true;

and then draw a shape as you normally would. For example:

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');

ctx.shadowInset = true;
ctx.shadowBlur = 15;
ctx.shadowColor = 'black';

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 50, 50);

http://codepen.io/patlillis/pen/vxaery

Tests are performed using Mocha, along with a little help from the excellent imagediff library. Since this project relies on the browser-based Canvas API, tests are run in a browser-like environment. Currently, the only way to perform tests is in an actual full real browser.

To run tests locally, first clone this repo and install all the necessary NPM packages. Then run the tests using the provided NPM script.

git clone https://github.com/patlillis/inset.js
cd inset.js
npm install
npm test

Test results will be displayed in a lovely interactive UI using Mocha's HTML reporter. As a bonus, it will also display image diffs of all canvas tests.

Several NPM tasks are provided for ease of development. If you're really curious, check out package.json for more details.

Code licensed MIT. © 2019 Pat Lillis.