{"id":16125499,"url":"https://github.com/semibran/canvas-paint","last_synced_at":"2025-03-18T13:30:46.473Z","repository":{"id":57193752,"uuid":"82734511","full_name":"semibran/canvas-paint","owner":"semibran","description":":art: helper functions for drawing onto \u003ccanvas\u003e elements","archived":false,"fork":false,"pushed_at":"2017-06-10T04:00:20.000Z","size":18,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T09:55:39.599Z","etag":null,"topics":["canvas","draw","html","paint"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/semibran.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":"2017-02-21T22:41:01.000Z","updated_at":"2021-09-26T18:54:10.000Z","dependencies_parsed_at":"2022-09-15T22:30:39.681Z","dependency_job_id":null,"html_url":"https://github.com/semibran/canvas-paint","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fcanvas-paint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fcanvas-paint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fcanvas-paint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fcanvas-paint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semibran","download_url":"https://codeload.github.com/semibran/canvas-paint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243928187,"owners_count":20370247,"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":["canvas","draw","html","paint"],"created_at":"2024-10-09T21:29:49.894Z","updated_at":"2025-03-18T13:30:46.137Z","avatar_url":"https://github.com/semibran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# canvas-paint\n\u003e Helper functions for drawing onto `\u003ccanvas\u003e` elements\n\n## install\n```sh\nnpm install canvas-paint\n```\n\n## usage\n```js\nconst paint = require('canvas-paint')\n```\n\n### `fill(canvas, color)`\nFills the entire `canvas` with [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n```js\nfill(canvas, 'black')\n```\n\n### `clear(canvas, rect?)`\nClears the region on `canvas` as specified by `rect`.\n```js\nclear(canvas, {\n  x: canvas.height / 4,\n  y: canvas.height / 4,\n  width: canvas.width / 2,\n  height: canvas.height / 2\n})\n```\nIf `rect` is not provided, the entire canvas will be cleared.\n\n### `rect(canvas, options)`\n```js\nrect(canvas, {\n  x: 50,\n  y: 25,\n  width: 100,\n  height: 50,\n  fill: 'red'\n})\n```\n\n### `circle(canvas, options)`\n```js\ncircle(canvas, {\n  x: canvas.width / 2,\n  y: canvas.height / 2,\n  radius: 32,\n  stroke: {\n    color: 'blue',\n    width: 2\n  }\n})\n```\n\n### `arc(canvas, options)`\n```js\narc(canvas, {\n  x: canvas.width / 2,\n  y: canvas.height / 2,\n  radius: 48,\n  start: 120,\n  end: 60,\n  fill: 'yellow'\n})\n```\nThe above code draws the following image:\n\n![arc example](img/arc.png)\n\nNote that `start` and `end` are provided in angles instead of radians. Also, the `anticlockwise` parameter has been omitted. The values for `start` and `end` can be switched in order to achieve the same result.\n\n### `line(canvas, options)`\n```js\nline(canvas, {\n  start: { x: 50, y: 25 },\n  end: { x: 125, y: 5 },\n  stroke: {\n    color: 'black',\n    width: 2\n  }\n})\n```\n\n### `polygon(canvas, options)`\nDraws a polygon onto `canvas`.\n```js\npolygon(canvas, {\n  points: [\n    { x: 64, y: 16 },\n    { x: 112, y: 64 },\n    { x: 64, y: 112 },\n    { x: 16, y: 64 }\n  ],\n  fill: 'red'\n})\n```\nThe above code draws the following image:\n\n![polygon example](img/polygon.png)\n\n### `image(canvas, options)`\n```js\nimage(canvas, {\n  image: sprites.wall,\n  x: 32,\n  y: 16,\n  width: sprites.wall.width * 2,\n  height: sprites.wall.height * 2\n})\n```\n`width` and `height` are optional - they will default to `image.width` and `image.height` if not provided.\n\n### `text(canvas, options)`\n```js\ntext(canvas, {\n  text: 'Hello world',\n  x: canvas.width / 2,\n  y: canvas.height / 2,\n  align: 'center',\n  baseline: 'middle',\n  font: {\n    size: 48,\n    family: 'sans-serif'\n  },\n  stroke: {\n    color: 'blue'\n  }\n})\n```\nThe above code draws the following image:\n\n![text example](img/text.png)\n\nAdditionally, a couple of minor changes have been made to the API defaults.\n- `font.size` defaults to `16`\n- `align` defaults to `'left'`\n- `baseline` defaults to `'top'`\n\n## to do\n- [x] basic drawing methods\n- [ ] make fill/stroke blocks reusable\n- [ ] line cap, join, dash\n- [ ] shadows\n- [ ] gradients\n- [ ] compositing\n- [ ] masking\n- [ ] bezier curves\n- [ ] transforms (translation, rotation, scaling)\n\n## license\n[MIT](https://opensource.org/licenses/MIT) © [Brandon Semilla](https://git.io/semibran)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fcanvas-paint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemibran%2Fcanvas-paint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fcanvas-paint/lists"}