Tiny Canvas

It's a very basic demo that draws into a canvas. The purpose is to experiment with exposing few new features coming to Universal Stylus Initiative hardware. Information about USI can be found here.

Working on tiny canvas

This project makes use of ECMAScript Modules (ESM) and runs them directly in the browser using Vite. If you install new dependencies using npm like npm install --save my-dependency, then please run npm run build afterwards to generate the new modules in docs folder. Also, the docs folder should be committed. Make sure to update the package.json file accordingly.

To install app dependencies and but any further steps, run

$ npm install

Shoelace web components can be found here

Then run

$ npm run build

To test in the browser, run

$ npm run start

This will update the docs directory which is committed to the repository. This demo runs a service worker, for development purposes you may want to consider ticking the option "Bypass for Network" in the Application tab of the devtools.

To test in the browser with https (for testing pen customizations features like read/write preferred color)

$ npm run start-https

This will launch application in secure https using your own credentials. You still have to bypass the browser warning since it's a self signed certificates.

To build, run

$ npm run build

Then you can git push and you're ready to submit a PR along with updated changes in the ./docs directory.

Demo

The Tiny Canvas web app is hosted here Demo

You can see the your changes live after your PR is accepted

This demo is being developed by :