{"id":25454126,"url":"https://github.com/gitpushjoe/sharc","last_synced_at":"2026-02-02T09:36:57.421Z","repository":{"id":182327245,"uuid":"668319145","full_name":"gitpushjoe/sharc","owner":"gitpushjoe","description":"A 2D graphics and animation library for Javascript","archived":false,"fork":false,"pushed_at":"2024-11-17T16:30:05.000Z","size":2471,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T01:47:38.938Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.sharcjs.org/","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/gitpushjoe.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-19T14:20:39.000Z","updated_at":"2025-01-14T04:17:09.000Z","dependencies_parsed_at":"2023-07-19T15:53:32.609Z","dependency_job_id":"edb02f4d-6d31-42c3-a1e2-e27e7ef7978f","html_url":"https://github.com/gitpushjoe/sharc","commit_stats":null,"previous_names":["gitpushjoe/sharc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gitpushjoe/sharc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitpushjoe%2Fsharc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitpushjoe%2Fsharc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitpushjoe%2Fsharc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitpushjoe%2Fsharc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitpushjoe","download_url":"https://codeload.github.com/gitpushjoe/sharc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitpushjoe%2Fsharc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264021400,"owners_count":23545493,"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":[],"created_at":"2025-02-17T23:59:44.704Z","updated_at":"2026-02-02T09:36:52.400Z","avatar_url":"https://github.com/gitpushjoe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\r\n\u003cimg src='https://i.imgur.com/mXuQAt2.png' alt='sharc logo' width=200\u003e\r\n\r\n## A graphics \u0026 animation library for Typescript.\r\n\r\n**sharc**, short for **Sh**apes and **A**nimations **R**endered on a **C**anvas, is an object-oriented Typescript library that aims to make using the HTML Canvas API simpler and faster. It features:\r\n- graphics primitives like lines, rounded rectangles, bezier curves, text, and more\r\n- a `Stage` class that handles the animation loop for you\r\n- shape nesting to build complex structures\r\n- pointer event detection relative to a sprite's scaling, rotation, transformation\r\n- a robust animation system that lets you add several animations to a sprite in a single line of code\r\n- a vast properties system that makes modifying sprites a breeze\r\n- type-safety!\r\n\r\n---\r\n\r\n### Getting Started\r\n\r\n#### NPM\r\n\r\nThis is the simplest way to install sharc. Just run this command in your terminal:\r\n\r\n~~~txt\r\n$ npm install sharc-js\r\n~~~\r\n\r\n#### Github\r\n\r\nIf you're using Typescript, you can also just download the source code from Github. Just clone the repository into your project:\r\n\r\n~~~txt\r\n$ git clone https://github.com/gitpushjoe/sharc.git\r\n$ cd sharc\r\n$ git sparse-checkout set --no-cone sharc\r\n$ git checkout\r\n~~~\r\n\r\n---\r\n\r\n### Usage\r\n\r\nsharc provides a Stage class that handles the animation loop, pointer events, and keypresses for you. Here's a simple example of creating a Stage with a blue background:\r\n\r\n~~~ts\r\nimport { Stage } from 'sharc-js/Stage';\r\nimport { Colors } from 'sharc-js/Utils';\r\n\r\nconst canvas = document.getElementById('canvas') as HTMLCanvasElement;\r\nconst stage = new Stage(canvas, 'classic', Colors.Blue);\r\n\r\nstage.loop();\r\n~~~\r\n\r\n#### Sprites\r\n\r\nThen, you can create sprites and add them to the stage. Every stage has a root sprite that you can add children to, creating a tree of sprites. Here's an example of creating a red circle with a dotted pink outline:\r\n\r\n~~~ts\r\nimport { Ellipse } from 'sharc-js/Sprites'\r\n\r\nconst circle = new Ellipse({\r\n    color: Colors.Red,\r\n    radius: 100,\r\n    center: { x: 50, y: -50 },\r\n    stroke: {\r\n        color: Colors.Pink,\r\n        lineWidth: 10,\r\n        lineDash: 30,\r\n        lineDashGap: 20\r\n    },\r\n});\r\n\r\nstage.root.addChild(circle);\r\n~~~\r\n\r\n#### Animations\r\n\r\nAnimations in sharc work using a \"channels\" system. Every sprite comes with any number of channels, which are basically parallel animation queues. All of the channels are initialized knowing the properties of the sprite it came from. Every time the sprite is rendered, all of its channels will advance by one step, and the sprite will be updated accordingly. Once the current animation in a channel completes, it will be removed from the queue. Here is an example of how you can make a simple [bouncing ball animation](https://www.sharcjs.org/#/docs/animation/distribute) using sharc:\r\n\r\n~~~ts\r\nimport { Easing } from 'sharc-js/Utils';\r\n\r\ncircle.createChannels(1); // every sprite is created with 1 channel by default\r\ncircle.channels[0].push(\r\n    [\r\n        {\r\n            property: 'centerX',\r\n            from: -stage.width! / 2 + circle.radiusX / 2,\r\n            to: stage.width! / 2 - circle.radiusX / 2,\r\n            duration: 100,\r\n            delay: 0,\r\n            easing: Easing.Bounce(Easing.LINEAR),\r\n        }\r\n    ],\r\n    {loop: true});\r\ncircle.channels[1].push(\r\n    [ \r\n        {\r\n            property: 'centerY',\r\n            from: 20,\r\n            to: -stage.height! / 2 + circle.radiusY / 2,\r\n            duration: 40,\r\n            delay: 0,\r\n            easing: Easing.Bounce(Easing.EASE_OUT),\r\n        }\r\n    ],\r\n    {loop: true});\r\n~~~\r\n\r\n#### Properties\r\n\r\nsharc also supports a vast properties system that lets you modify sprites quickly and easily. For example, if you wanted to change the color of the circle to blue, you could do this:\r\n\r\n~~~ts\r\ncircle.color = Colors.Blue; // { red: 0, green: 0, blue: 255, alpha: 1 }\r\n~~~\r\n\r\nor this:\r\n\r\n~~~ts\r\ncircle.red = 0;\r\ncircle.green = 0;\r\ncircle.blue = 255;\r\n~~~\r\n\r\nSome properties are stored as-is, like `red`; some properties are collections of other properties, like `color`; and some properties are calculated from other properties, like `centerX` and `centerY`. All of these properties can be retrieved, modified, and animated in the exact same way! **sharc currently has more than 100 unique properties across eleven core sprite primitives.**\r\n\r\n---\r\n\r\n### Documentation\r\n\r\nFor more information on how to use sharc, check out the [official documentation](https://www.sharcjs.org).\r\n\r\n---\r\n\r\n### License\r\n\r\nsharc is licensed under the MIT License. You can find the full license text [here](https://github.com/gitpushjoe/sharc/blob/main/LICENSE).\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitpushjoe%2Fsharc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitpushjoe%2Fsharc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitpushjoe%2Fsharc/lists"}