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.
Install with npm.
$ 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.12.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.