https://github.com/manufosela/canvas-polygon
Webcomponent canvas-polygon following open-wc recommendations to draw polygons on a canvas
https://github.com/manufosela/canvas-polygon
Last synced: 3 months ago
JSON representation
Webcomponent canvas-polygon following open-wc recommendations to draw polygons on a canvas
- Host: GitHub
- URL: https://github.com/manufosela/canvas-polygon
- Owner: manufosela
- License: mit
- Created: 2023-06-24T07:14:49.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-06-24T07:52:15.000Z (almost 2 years ago)
- Last Synced: 2025-02-08T19:46:32.919Z (4 months ago)
- Language: JavaScript
- Size: 109 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
This webcomponent draw polygons on a canvas.
This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation
## Installation
```bash
npm i canvas-polygon
```
## Usage
```html
import 'canvas-polygon/canvas-polygon.js';
```
## Attributtes
* **size** - The size of the canvas element in pixels.
* **sides** - The number of sides of the polygon to render.
* **line-width** - The width of the polygon's stroke in pixels.
* **bg-color** - The background color of the canvas element.
* **offset-rotation** - The rotation offset of the polygon in radians.
## Linting and formatting
To scan the project for linting and formatting errors, run
```bash
npm run lint
```
To automatically fix linting and formatting errors, run
```bash
npm run format
```
## Testing with Web Test Runner
To execute a single test run:
```bash
npm run test
```
To run the tests in interactive watch mode run:
```bash
npm run test:watch
```
## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
npm run storybook
```
To build a production version of Storybook, run
```bash
npm run storybook:build
```
## Tooling configs
For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`