npm i canvasdraw-webcomponent
Add it to the page:
<canvas-with-controls width="500" height="500"></canvas-with-controls>
<script src="CanvasWithControls.js"></script>If pulling from node_modules, import 'canvasdraw-webcomponent' in your main script, then link that source. The HTML tag will be added automatically
Extends HTMLElement natively.
This is mostly a primitive for building on top of. E.g. the css controls are limited.
- The unbundled script by default this works by fetching the html and css files associated on first run.
- The bundled script has the html and css pre-fetched (e.g. with npm install).
Pan with middle mouse click or alt+left click, zoom with scroll wheel or the slider.
Serve the index.html from this folder to test the component out.
GPT 3.5 wrote it, I mostly just prompted.