{"id":15637030,"url":"https://github.com/kyranet/canvas-constructor","last_synced_at":"2026-02-21T19:03:46.550Z","repository":{"id":37017209,"uuid":"99447938","full_name":"kyranet/canvas-constructor","owner":"kyranet","description":"An ES6 utility for canvas with built-in functions and chained methods.","archived":false,"fork":false,"pushed_at":"2026-02-20T13:12:04.000Z","size":17752,"stargazers_count":117,"open_issues_count":13,"forks_count":20,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-20T17:39:04.902Z","etag":null,"topics":["canvas","chain-methods","draw","font-rendering","image-generation","image-rendering","node-canvas"],"latest_commit_sha":null,"homepage":"https://canvasconstructor.js.org","language":"HTML","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/kyranet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["kyranet"],"patreon":"kyranet","open_collective":"aura-roman","ko_fi":"kyranet","custom":"https://donate.skyra.pw/paypal"}},"created_at":"2017-08-05T21:08:43.000Z","updated_at":"2025-09-11T11:05:23.000Z","dependencies_parsed_at":"2023-10-16T21:56:34.717Z","dependency_job_id":"8f5e8a5d-615c-4c04-8a04-b2f703b6158e","html_url":"https://github.com/kyranet/canvas-constructor","commit_stats":{"total_commits":650,"total_committers":28,"mean_commits":"23.214285714285715","dds":0.7261538461538461,"last_synced_commit":"2e3b0f5eeab439b243f38bc767d1e9c52a4fddbc"},"previous_names":["kyranet/canvasconstructor"],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/kyranet/canvas-constructor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyranet%2Fcanvas-constructor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyranet%2Fcanvas-constructor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyranet%2Fcanvas-constructor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyranet%2Fcanvas-constructor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyranet","download_url":"https://codeload.github.com/kyranet/canvas-constructor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyranet%2Fcanvas-constructor/sbom","scorecard":{"id":497285,"data":{"date":"2025-08-11","repo":{"name":"github.com/kyranet/canvas-constructor","commit":"0a9902f9ae15013ddfd34a2b44fbe5ea051d4a77"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/1 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: .github/SECURITY.md:1","Info: Found linked content: .github/SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: .github/SECURITY.md:1","Info: Found text in security policy: .github/SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1","Warn: no topLevel permission defined: .github/workflows/continuous-delivery.yml:1","Warn: no topLevel permission defined: .github/workflows/continuous-integration.yml:1","Warn: no topLevel permission defined: .github/workflows/labelsync.yml:1","Info: topLevel 'contents' permission set to 'read': .github/workflows/static-documentation.yml:10","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/codeql-analysis.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-delivery.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-delivery.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-delivery.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-delivery.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-integration.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-integration.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-integration.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/continuous-integration.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/continuous-integration.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labelsync.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/labelsync.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/labelsync.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/labelsync.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static-documentation.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/static-documentation.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static-documentation.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/static-documentation.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static-documentation.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/static-documentation.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static-documentation.yml:47: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/static-documentation.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static-documentation.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/kyranet/canvas-constructor/static-documentation.yml/main?enable=pin","Info:   0 out of  15 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":10,"reason":"SAST tool is run on all commits","details":["Info: SAST configuration detected: CodeQL","Info: all commits (29) are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":7,"reason":"3 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T20:46:43.899Z","repository_id":37017209,"created_at":"2025-08-19T20:46:43.900Z","updated_at":"2025-08-19T20:46:43.900Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29690657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T18:18:25.093Z","status":"ssl_error","status_checked_at":"2026-02-21T18:18:22.435Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","chain-methods","draw","font-rendering","image-generation","image-rendering","node-canvas"],"created_at":"2024-10-03T11:09:40.163Z","updated_at":"2026-02-21T19:03:46.526Z","avatar_url":"https://github.com/kyranet.png","language":"HTML","funding_links":["https://github.com/sponsors/kyranet","https://patreon.com/kyranet","https://opencollective.com/aura-roman","https://ko-fi.com/kyranet","https://donate.skyra.pw/paypal"],"categories":["HTML"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n![CanvasConstructor Logo](https://cdn.discordapp.com/emojis/451438332375728128.png?v=1)\n\n# canvas-constructor\n\n**A utility for Canvas with chainable methods and consistent interface for all environments**\n\n[![npm](https://img.shields.io/npm/v/canvas-constructor.svg?maxAge=3600)](https://www.npmjs.com/package/canvas-constructor)\n[![npm](https://img.shields.io/npm/dt/canvas-constructor.svg?maxAge=3600)](https://www.npmjs.com/package/canvas-constructor)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/kyranet/canvas-constructor/master/LICENSE)\n\n[![Support Server](https://discord.com/api/guilds/437335547711848458/embed.png?style=banner2)](https://discord.gg/taNgb9d)\n\n\u003c/div\u003e\n\n---\n\n## Live Demo\n\n[![Edit on Stackblitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/canvas-constructor-vite?file=main.js)\n\n## Installation\n\nThis module requires one of the following packages to be installed for Node.js:\n\n-   [`@napi-rs/canvas`](https://www.npmjs.com/package/@napi-rs/canvas)\n-   [`skia-canvas`](https://www.npmjs.com/package/skia-canvas)\n-   [`canvas`](https://www.npmjs.com/package/canvas)\n\n\u003e **Note**: If you are building a website, no extra dependencies are required.\n\n---\n\nHow to use it:\n\n**Node.js**:\n\n```js\nconst { Canvas } = require('canvas-constructor/napi-rs');\n// or 'canvas-constructor/skia' if you are using `skia-canvas`\n// or 'canvas-constructor/cairo' if you are using `canvas`\n\nnew Canvas(300, 300)\n\t.setColor('#AEFD54')\n\t.printRectangle(5, 5, 290, 290)\n\t.setColor('#FFAE23')\n\t.setTextFont('28px Impact')\n\t.printText('Hello World!', 130, 150)\n\t.png();\n```\n\n**Browser**:\n\n```html\n\u003ccanvas id=\"canvas\" width=\"300\" height=\"400\"\u003e\u003c/canvas\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/canvas-constructor\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n\tconst canvasElement = document.getElementById('canvas');\n\tnew CanvasConstructor.Canvas(canvasElement)\n\t\t.setColor('#AEFD54')\n\t\t.printRectangle(5, 5, 290, 290)\n\t\t.setColor('#FFAE23')\n\t\t.setTextFont('28px Impact')\n\t\t.printText('Hello World!', 130, 150);\n\u003c/script\u003e\n```\n\nAlternatively, you can import `canvas-constructor/browser` if you are using a bundler such as Vite, Webpack, or Rollup:\n\n```js\nimport { Canvas } from 'canvas-constructor/browser';\n```\n\nNow, let's suppose we want to add images, we can use the `loadImage` function, which works in all supported environments:\n\n```js\nconst { Canvas, loadImage } = require('canvas-constructor/napi-rs');\n\nasync function createCanvas() {\n\tconst image = await loadImage('./images/kitten.png');\n\n\treturn new Canvas(300, 400)\n\t\t.printImage(image, 0, 0, 300, 400)\n\t\t.setColor('#FFAE23')\n\t\t.setTextFont('28px Impact')\n\t\t.setTextAlign('center')\n\t\t.printText('Kitten!', 150, 370)\n\t\t.pngAsync();\n}\n```\n\nAnd now, you have created an image with a kitten in the background and some centered text at the bottom of it.\n\nIf you experience issues with `@napi-rs/canvas`, `skia-canvas`, or `canvas`, please refer to their respective package repositories, this\npackage is just a convenient wrapper that makes it easier to use the canvas in both Node.js and the browser. And does not modify the\nbehavior of the underlying canvas implementation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyranet%2Fcanvas-constructor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyranet%2Fcanvas-constructor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyranet%2Fcanvas-constructor/lists"}