{"id":21012256,"url":"https://github.com/codebanesr/angular-14-canvas","last_synced_at":"2026-04-27T09:30:57.452Z","repository":{"id":184125067,"uuid":"645342631","full_name":"codebanesr/angular-14-canvas","owner":"codebanesr","description":"Angular 14 canvas, taken from https://github.com/irustm/angular-canvas","archived":false,"fork":false,"pushed_at":"2023-05-25T13:24:32.000Z","size":7719,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-29T02:33:43.948Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebanesr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-25T12:48:31.000Z","updated_at":"2023-05-25T12:49:11.000Z","dependencies_parsed_at":"2023-08-15T00:52:07.472Z","dependency_job_id":null,"html_url":"https://github.com/codebanesr/angular-14-canvas","commit_stats":null,"previous_names":["codebanesr/angular-14-canvas","shanurrahman/angular-14-canvas"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codebanesr/angular-14-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebanesr%2Fangular-14-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebanesr%2Fangular-14-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebanesr%2Fangular-14-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebanesr%2Fangular-14-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebanesr","download_url":"https://codeload.github.com/codebanesr/angular-14-canvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebanesr%2Fangular-14-canvas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32331305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T23:26:28.701Z","status":"online","status_checked_at":"2026-04-27T02:00:06.769Z","response_time":128,"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":[],"created_at":"2024-11-19T09:35:59.214Z","updated_at":"2026-04-27T09:30:57.403Z","avatar_url":"https://github.com/codebanesr.png","language":"TypeScript","readme":"# AngularCanvas\n\n🎨 Angular canvas renderer with support DefaultDomRenderer.\n\nFeatures:\n\n- **Custom canvas elements**\n- **Support redraw** in one canvas context\n- **Support listeners** inputs and outputs\n- **Easily migrate** your code on canvas to component approach\n- EmulatedEncapsulation by default in canvas component\n- Canvas elements support onInit and onDestroy methods\n- Support animation canvas elements\n\nDEMO: [Game](https://irustm.github.io/angular-canvas/#/game) |\n[Graph](https://irustm.github.io/angular-canvas/#/demo)\n\n# Getting start\n\n`npm i angular-canvas`\n\nCreate canvas element:\n\n```ts\nimport { CanvasElement, NgCanvasElement, NgCanvas } from 'angular-canvas';\n\n@CanvasElement({\n  selector: 'graph-line'\n})\nexport class GraphLineElement implements NgCanvasElement {\n    // parent element\n    public parent: NgCanvas;\n\n    // canvas element redraw until all NgCanvasElement needDraw as true\n    public needDraw: boolean;\n\n    setNgProperty(name: string, value: any): void {\n      this[name] = value;\n\n      // redraw all element in one canvas context after set ng property\n      this.parent.drawAll();\n    }\n\n    draw(context: CanvasRenderingContext2D, time: number): void {\n      context.strokeStyle = 'red';\n      ...\n    }\n}\n```\n\nRegister this element in module\n\n```ts\nimport { CanvasDomModule } from 'angular-canvas';\n...\n\n@NgModule({\n...\nimports: [\n    CanvasDomModule.forRoot(\n    [\n      GraphLineElement,\n      ...\n    ]\n  ),\n```\n\nAnd declare component `use canvas render`\n@CanvasComponent\n\ncomponent.ts\n\n```ts\n@CanvasComponent\n@Component({\n  selector: 'app-graph-canvas-example',\n  templateUrl: './graph-canvas-example.component.html',\n  styleUrls: ['./graph-canvas-example.component.scss'],\n})\n```\n\ncomponent.html\n\n```html\n\u003cp\u003eGraph example\u003c/p\u003e\n\n\u003ccanvas class=\"first\"\u003e\n  \u003crect [x]=\"mouseX\" [y]=\"20\" w=\"20\" h=\"20\"\u003e\u003c/rect\u003e\n  \u003cline [x1]=\"10\" [x2]=\"100\" [y1]=\"10\" [y2]=\"200\"\u003e\u003c/line\u003e\n\u003c/canvas\u003e\n\u003ccanvas\u003e\n  \u003cgraph-line\n    [data]=\"data\"\n    [step]=\"step\"\n    [deltaX]=\"deltaX\"\n    strokeStyle=\"orange\"\n  \u003e\u003c/graph-line\u003e\n  \u003cgraph-line\n    [data]=\"data2\"\n    [step]=\"step\"\n    [deltaX]=\"deltaX\"\n    strokeStyle=\"green\"\n  \u003e\u003c/graph-line\u003e\n  \u003cgraph-line [data]=\"data3\" [deltaX]=\"deltaX\" strokeStyle=\"blue\"\u003e\u003c/graph-line\u003e\n\u003c/canvas\u003e\n```\n\nHow to work renderer:\n\n\u003cimg src =\"https://github.com/irustm/angular-canvas/blob/master/assets/renderer.png?raw=true\"\u003e\n\nDemo example:\n\n\u003cimg src =\"https://github.com/irustm/angular-canvas/blob/master/assets/graph-example3.png?raw=true\"\u003e\n\nGame example:\n\n\u003cimg src =\"https://github.com/irustm/angular-canvas/blob/master/assets/game-example.png?raw=true\"\u003e\n\n## How to integrate with BrowserAnimationsModule?\nCreate renderer factory and provide in your app.module:\n```ts\nimport { EventManager, ɵDomSharedStylesHost as DomSharedStylesHost } from \"@angular/platform-browser\";\nimport { ɵAnimationEngine as AnimationEngine } from \"@angular/animations/browser\";\nimport { ɵAnimationRendererFactory as AnimationRendererFactory } from \"@angular/platform-browser/animations\";\nimport { CanvasDomRendererFactory } from \"angular-canvas\";\nexport function canvasAnimationsFactory(\n    eventManager: EventManager,\n    domSharedStylesHost: DomSharedStylesHost,\n    app_id,\n    ngZone: NgZone,\n    animationEngine: AnimationEngine\n) {\n    // register elements this\n    forwardRef(() =\u003e {\n        return [GraphLineElement, ...];\n    });\n    const canvasRenderer = new CanvasDomRendererFactory(eventManager, domSharedStylesHost, app_id, ngZone);\n    return new AnimationRendererFactory(canvasRenderer, animationEngine, ngZone);\n}\n// in app.module.ts:\n...\nimports: [\n  BrowserAnimationModule\n],\nproviders: [\n        {\n            provide: RendererFactory2,\n            useFactory: canvasAnimationsFactory,\n            deps: [EventManager, DomSharedStylesHost, APP_ID, NgZone, AnimationEngine]\n        }\n    ],\n```\n\n\n\n# API\n\n`NgCanvas` - main component with selector `canvas`\n\n```ts\n  public element: HTMLCanvasElement;\n  public drawAll(): void; // redraw all register elements in one canvas context\n\n```\n\n---\n\n`NgCanvasElement` - canvas element interface for register in module\n\n```ts\n  style?: CSSStyleDeclaration;\n  classList?: DOMTokenList;\n  needDraw?: boolean; // canvas element redraw until all NgCanvasElement needDraw as true\n  parent: NgCanvas; // canvas parent element\n\n  onInit?(context: CanvasRenderingContext2D): void;\n\n  onDestroy?(context: CanvasRenderingContext2D): void;\n\n\n  /**\n  * Method for draw element, *time* - requestAnimationTime\n  */\n  draw(context: CanvasRenderingContext2D, time?: number): void;\n\n  // standart renderer methods\n\n  appendChild?(newChild: any): void;\n\n  addClass?(name): void;\n\n  insertBefore?(newChild: any, refChild: any): void;\n\n  setNgAttribute?(name: string, value: string, namespace?: string | null): void;\n\n  setAttribute?(name: string, value: string, namespace?: string | null): void;\n\n  setNgProperty?(name: string, value: any): void;\n\n  setStyle?(style: string, value: any, flags?: RendererStyleFlags2): void;\n\n  setValue?(value: any): void;\n\n  removeAttribute?(name: string, namespace?: string | null): void;\n\n  removeChild?(oldChild: any): void;\n\n  removeClass?(name: string): void;\n\n  removeStyle?(style: string, flags?: RendererStyleFlags2): void;\n\n  setAttributeNS?(namespaceUri: string, name: string, value: string): void;\n\n  removeAttributeNS?(namespaceUri: string, name: string): void;\n```\n\n---\n\n`CanvasComponent` - Decorator, need for use canvas renderer\n\n---\n\n`CanvasElement` - Decorator, for register canvas elements in storage metadata\nsupport only one parameter: `selector`\n\n---\n\n`CanvasDomModule.forRoot([])` register elements in AppModule\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebanesr%2Fangular-14-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebanesr%2Fangular-14-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebanesr%2Fangular-14-canvas/lists"}