https://github.com/joshbrew/canvasdraw-webcomponent

Basic canvas drawing interface pure JS web component
https://github.com/joshbrew/canvasdraw-webcomponent

html javascript webcomponents

Last synced: about 1 month ago
JSON representation

Basic canvas drawing interface pure JS web component

• Host: GitHub
• URL: https://github.com/joshbrew/canvasdraw-webcomponent
• Owner: joshbrew
• License: mit
• Created: 2023-10-18T23:41:36.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-19T05:50:20.000Z (over 2 years ago)
• Last Synced: 2025-03-24T06:34:29.000Z (about 1 year ago)
• Topics: html, javascript, webcomponents
• Language: JavaScript
• Homepage:
• Size: 283 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Canvas drawing interface pure JS web component

`npm i canvasdraw-webcomponent`

Add it to the page:

```html

```

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.

## Test

Serve the index.html from this folder to test the component out.

![png](./Capture.PNG)

GPT 3.5 wrote it, I mostly just prompted.