Gesso builds packages that interact with HTML canvases. Use the power of npm, a built-in server for testing and demoing, all without writing any HTML. To deploy, simply load the resulting JS file on a page containing a canvas.
Gesso is a command-line tool that:
<script>element to your website
Gesso also includes an optional base library, and a plugin system to handle ambitious canvas projects.
Sometimes you just want to make good art in the browser. And that inspiration shouldn't be wasted on boilerplate or build details.
$ npm install -g gesso
Initialize a new package:
$ npm init
Add Gesso as a dependency:
$ npm install -S gesso
Create a new
index.js file and add your code. For example:
var Gesso = require'gesso';var game = ;var t = 0;var x;gameupdatet += 1;var center = gamewidth - 300 / 2;x = center + Mathsint / 15 * 20;;gamerenderctxfillStyle = 'rgba(255, 255, 255, 0.2)';ctxfillRect0 0 gamewidth gameheight;ctxfont = '36px Verdana';ctxfillStyle = '#f34';ctxfillText'Hello,' 270 200;ctxfillText'Browser Games!' x 252;;gamerun;
Note: See hello for a complete project around this example.
Build and serve:
$ gesso serverversion: 0.10.0* Running on* Watching for changes
Now visit http://localhost:63550 to see it in action.
The command-line interface provides commands to help you build, test, and publish an idea quickly.
You can also type
gesso -h for inline help.
Builds and serves your app, rebuilding on file changes.
$ gesso serve [options]
--port, -p <port>: The port to serve on (default
--host <address>: The host to serve from (default
Builds your app and bundles it into the output file (dist/gesso-bundle.js by default).
$ gesso build [options]
--out <path>: The output file (default
Gesso projects are normal Node projects. The only additional requirements are:
gessoas a dependency. The CLI delegates all commands to the local installation so you can use different versions of Gesso in different projects.
index.jsfile. Or you can be explicit by providing a main field.
Gesso uses browserify to construct a
require() dependency tree, including
also use many Node built-in modules since they're wrapped to work in the browser.
Detailed documentation is currently being written and will be live by version 1.0.
Please take a look at the spinning example's index.js for now.
Build your project
$ gesso build
Move the generated
dist/gesso-bundle.js to your website
Add the following on your page where you want your project to be rendered:
Note: If this is the only canvas on the page, then you can omit the
Add the following just above the
</body> close tag:
If your PR has been waiting a while, feel free to ping me on Twitter.