{"id":20645148,"url":"https://github.com/kucingkode/krayonjs","last_synced_at":"2026-04-17T23:32:44.190Z","repository":{"id":138027020,"uuid":"612275605","full_name":"KucingKode/krayonjs","owner":"KucingKode","description":"Make javascript Canvas API simpler and easier for drawing 2D graphics","archived":false,"fork":false,"pushed_at":"2023-03-11T05:08:50.000Z","size":160,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T15:55:01.159Z","etag":null,"topics":["2d","canvas","canvas-2d-context","canvas2d","canvasjs","drawing-library","frontend","graphics","javascipt","javascript-library","typescript-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/krayonjs","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/KucingKode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-10T15:22:52.000Z","updated_at":"2024-09-14T08:16:02.000Z","dependencies_parsed_at":"2023-07-06T14:00:48.038Z","dependency_job_id":null,"html_url":"https://github.com/KucingKode/krayonjs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/KucingKode/krayonjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KucingKode%2Fkrayonjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KucingKode%2Fkrayonjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KucingKode%2Fkrayonjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KucingKode%2Fkrayonjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KucingKode","download_url":"https://codeload.github.com/KucingKode/krayonjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KucingKode%2Fkrayonjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27581243,"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","status":"online","status_checked_at":"2025-12-07T02:00:07.896Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["2d","canvas","canvas-2d-context","canvas2d","canvasjs","drawing-library","frontend","graphics","javascipt","javascript-library","typescript-library"],"created_at":"2024-11-16T16:18:51.306Z","updated_at":"2025-12-07T23:04:25.351Z","avatar_url":"https://github.com/KucingKode.png","language":"TypeScript","readme":"# KrayonJS\n\nKrayon.js is a **Javascript library to help you work with Canvas API**. Krayon.js wrap Canvas API into a simple class, Krayon, that is simpler and easier to understand.\n\n## Features\n\n- **Resizable with CSS**. Normal canvas 2D context will be stretched when you try to resize it with css, Krayon will update canvas 2D context size when its container size changes.\n\n- **Changeable angle unit**. With Krayon, you can change the function parameter angle unit from radian to degree.\n\n- **Changeable coordinate center point**. With Krayon, you can change the coordinate center point of the canvas 2d context to other than top-left, it can be center (like a normal cartesian coordinate), top-right, bottom-right, or bottom-left\n\n## Example\n\n```js\nimport { krayon } from './krayon.esm.js'\n\nconst container = document.querySelector('div')\nconst k = new krayon(container)\n\nwindow.onload = () =\u003e {\n  k.ANGLE_UNIT = 'degree'\n  k.COORDINATE_ORIGIN = 'center'\n\n  k\n    .bg('black')\n\n    // color, blur, offsetX, offsetY\n    .shadow('green', 10, 0, 0)\n    .fillStyle('red')\n    .circle(0, 0, 20) // x, y, r\n    .fill()\n  \n    .begin()\n    .fillStyle('blue')\n    .rect(100, 100, 20, 20) // w, y, w, h\n    .fill()\n}\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkucingkode%2Fkrayonjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkucingkode%2Fkrayonjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkucingkode%2Fkrayonjs/lists"}