{"id":16990827,"url":"https://github.com/blenderskool/canvas-elements","last_synced_at":"2025-04-12T04:12:47.696Z","repository":{"id":49326596,"uuid":"174664944","full_name":"blenderskool/canvas-elements","owner":"blenderskool","description":"🖌️ Library of commonly used components for HTML5 Canvas made easy to use","archived":false,"fork":false,"pushed_at":"2019-08-06T09:08:08.000Z","size":51,"stargazers_count":2,"open_issues_count":10,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T04:12:40.907Z","etag":null,"topics":["collection","components","elements","html5-canvas","library","nodejs","simple"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blenderskool.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-09T07:55:49.000Z","updated_at":"2022-07-24T13:52:55.000Z","dependencies_parsed_at":"2022-08-28T10:21:38.503Z","dependency_job_id":null,"html_url":"https://github.com/blenderskool/canvas-elements","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Fcanvas-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Fcanvas-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Fcanvas-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blenderskool%2Fcanvas-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blenderskool","download_url":"https://codeload.github.com/blenderskool/canvas-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514205,"owners_count":21116903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection","components","elements","html5-canvas","library","nodejs","simple"],"created_at":"2024-10-14T03:23:51.073Z","updated_at":"2025-04-12T04:12:47.660Z","avatar_url":"https://github.com/blenderskool.png","language":"TypeScript","readme":"# Canvas Elements\n[![Release](https://badgen.net/npm/v/canvas-elements?label=release)](https://npmjs.com/package/canvas-elements)\n[![Size](https://badgen.net/bundlephobia/min/canvas-elements?color=green)](https://npmjs.com/package/canvas-elements)\n[![License](https://badgen.net/github/license/blenderskool/canvas-elements)](https://github.com/blenderskool/canvas-elements/blob/master/LICENSE)\n\nCanvas Elements is a library of commonly used components for HTML5 canvas made easy to use with JavaScript and Node.js.\nIt wraps the structure and the styling of elements into one which makes it easy to create new elements on the canvas.\n\n## Installation\n### Using NPM\nTo use Canvas Elements in Node.js, install the npm package by using the command below.\n```bash\nnpm install canvas-elements\n```\n\n### Using CDN\nThe project also includes a minified CDN file in the `build/cdn` directory of the project.\n```\nhttps://unpkg.com/canvas-elements/build/cdn/canvas-elements.min.js\n```\n\n## Using the library\n### Using Node\n```javascript\nvar CanvasElements = require('canvas-elements');\n// All elements are in CanvasElements object. Example: CanvasElements.Circle, CanvasElements.Text\n\n// Using ES6 import, specifically choose elements that you need\nimport { Circle, Text } from 'canvas-elements';\n```\n**Note: If you are using ES6 import, ignore `CanvasElements` object in the following documentation.**\n\n### Using CDN\nCDN exposes a `CanvasElements` object to the window which contains the constructors of all the elements.\n```javascript\nvar circle = new CanvasElements.Circle({\n   // options\n});\n```\n\n### Example usage\nThis example program creates a circle with blue rounded rectangle which has 'Hello Canvas' text at the center.  \n[Check it on JSFiddle](https://jsfiddle.net/hcqokzb1/)\n\n```javascript\nvar canvas = document.getElementsByTagName('canvas')[0]; // Get the canvas element reference\nvar ctx = canvas.getContext('2d'); // Get context of the canvas\n\n// Create a circle\nvar circle = new CanvasElements.Circle({\n  x: 80,\n  y: 80,\n  r: 60,\n  background: 'white',\n  borderWidth: 4,\n  borderColor: '#000',\n  ctx: ctx\n});\n\n// Creates a blue rounded rectangle \nvar text = new CanvasElements.Rect({\n  x: 25,\n  y: 63,\n  r: 20,\n  w: 110,\n  h: 30,\n  background: '#03a9f4',\n  ctx: ctx\n})\n\n// Create 'Hello Canvas' text\nvar text = new CanvasElements.Text({\n  x: 80,\n  y: 80,\n  background: '#ffffff',\n  text: 'Hello Canvas',\n  size: 16,\n  align: 'center',\n  baseline: 'middle',\n  weight: '600',\n  ctx: ctx\n});\n```\n\n## Options Reference\nAll the elements constructors take options object which allows you to configure the structure and style of the element.\n\n### Common options\nThese options are common between all the elements included in the library.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| x | `number` (required) | X coordinate of the element in canvas |\n| y | `number` (required) | Y coordinate of the element in canvas |\n| ctx | `CanvasRenderingContext2D` (required) | Context of the canvas to which the element must be drawn |\n| background | `string` (optional) | Fill color. Eg. `#6ddad0`, `rgba(20, 30, 40, 0.5)` |\n| borderWidth | `number` (optional) | Thickness of the border |\n| borderColor | `string` (optional) | Color of the border |\n| rotation | `number` (optional) | Rotation of the element in radians. Center is geometric center for shapes and starting coordinates for `Text` element\n\n### Circle\nSome exclusive options for Circle element.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| r | `number` (required) | Radius of the circle |\n\n### Rect (Rectangle)\nSome exclusive options for Rect element to create rectangles.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| w | `number` (required) | Width of the rectangle |\n| h | `number` (required) | Height of the rectangle |\n| r | `number` (optional) | Roundness of every corner. Same as `border-radius` CSS property |\n\n### Ellipse\nSome exclusive options for Ellipse element.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| radiusX | `number` (required) | Horizontal radius of the ellipse |\n| radiusY | `number` (required) | Vertical radius of the ellipse |\n\n### Line\nSome exclusive options for Line element.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| x2 | `number` (optional) | Ending x coordinate of the line |\n| y2 | `number` (optional) | Ending y coordinate of the line |\n| r | `number` (optional) | Distance from (x, y) for Polar system |\n| angle | `number` (optional) | Angle from the horizontal axis in radians (Clockwise is positive) for Polar system |\n| lineCap | `string` (optional) | Style for the ends of the line. Takes values `square (default)`, `round`, `butt` |\n\n### Text\nSome exclusive options for Text element to render text.\n\n|Option| Type | Description |\n|:--:| -- | -- |\n| text | `string` (required) | Text to be shown |\n| size | `number` (required) | Font size |\n| font | `string` (optional) | Font family |\n| align | `string` (optional) | Horizontal text alignment |\n| baseline | `string` (optional) | Vertical text alignment |\n| weight | `string` (optional) | Text weight |\n\n## Contributing\nTo contribute to the development of this project, you must first fork this project into your own account.\nMake sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. Then follow the given commands\n\n```bash\ngit clone https://github.com/your-username/canvas-elements\ncd canvas-elements\nnpm install\n```\nThe source code is located in the `src` folder. Once the project is built or bundled, `build` directory would be created which\ncontains the code for distribution.\n\n### To run the development server\nPlayground is included in the project in `playground` directory. This is used to test features of Canvas Elements during development.\n**Do not commit changes in playground.**\n\n```bash\nnpm run dev\n```\nThis will start a live development server on port `3030`.\n\n### To build the project\n```bash\nnpm run build\n```\n\n### To bundle and minify source\n```bash\nnpm run bundle\n```\nBundled CDN file would be located in `build/cdn` directory.\n\n## License\nThis project is under [MIT License](https://github.com/blenderskool/canvas-elements/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblenderskool%2Fcanvas-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblenderskool%2Fcanvas-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblenderskool%2Fcanvas-elements/lists"}