{"id":28418491,"url":"https://github.com/jagenjo/canvas2dtowebgl","last_synced_at":"2025-06-28T03:31:07.979Z","repository":{"id":73402599,"uuid":"24495875","full_name":"jagenjo/Canvas2DtoWebGL","owner":"jagenjo","description":"Ports (almost) all Canvas2D functions to the GPU so it can be mixed with a WebGL canvas.","archived":false,"fork":false,"pushed_at":"2021-11-08T16:39:24.000Z","size":316,"stargazers_count":300,"open_issues_count":3,"forks_count":55,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-04-14T18:35:46.682Z","etag":null,"topics":["canvas","canvas2d","canvas2d-functions","canvasrenderingcontext2d","javascript","webgl"],"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/jagenjo.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}},"created_at":"2014-09-26T10:37:54.000Z","updated_at":"2024-03-20T06:18:32.000Z","dependencies_parsed_at":"2023-03-02T05:30:52.851Z","dependency_job_id":null,"html_url":"https://github.com/jagenjo/Canvas2DtoWebGL","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jagenjo/Canvas2DtoWebGL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagenjo%2FCanvas2DtoWebGL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagenjo%2FCanvas2DtoWebGL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagenjo%2FCanvas2DtoWebGL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagenjo%2FCanvas2DtoWebGL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jagenjo","download_url":"https://codeload.github.com/jagenjo/Canvas2DtoWebGL/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jagenjo%2FCanvas2DtoWebGL/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262371144,"owners_count":23300556,"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","canvas2d","canvas2d-functions","canvasrenderingcontext2d","javascript","webgl"],"created_at":"2025-06-04T10:16:41.541Z","updated_at":"2025-06-28T03:31:07.972Z","avatar_url":"https://github.com/jagenjo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Canvas2DtoWebGL.js\r\n==================\r\n\r\nCanvas2DtoWebGL.js ports almost all the methods from the regular Canvas2D context (CanvasRenderingContext2D) of HTML5 to WebGL calls, this allows to mix 3D in your 2D Canvas or the opposite (to create GUIs, debug info, etc), and *in some cases* it could even improve the performance of your regular Canvas2D (when working with big images).\r\nIt uses [litegl.js](https://github.com/jagenjo/litegl.js) as the base WebGL library.\r\nTo improve performance it doesn't generate garbage (reuses the same containers). It can work with non power of two textures (no mipmaps obviously).\r\n\r\nFully supported functions:\r\n\r\n * translate, rotate, scale, transform, setTransform, save, restore\r\n * clearRect\r\n * strokeStyle, fillStyle, globalAlpha\r\n * drawImage you can use images or canvas (video not tested)\r\n * beginPath, lineTo, moveTo, closePath, stroke, rect, strokeRect, fillRect, arc\r\n * fill (limited to convex shapes)\r\n * createPattern with images\r\n * bezierCurveTo and quadraticCurveTo\r\n * fillText (it creates a texture atlas with all the characters)\r\n * lineWidth (only one mode supported)\r\n * imageSmoothingEnabled\r\n * getImageData and putImageData (not fully tested)\r\n * shadows (not blurred)\r\n * createLinearGradient\r\n * clip\r\n\r\nNot supported (yet):\r\n * globalCompositeOperation\r\n * concave polygon shapes\r\n \r\nWon't be supported:\r\n * Blurred shadows\r\n  \r\nIt is easy to tweak, all the parameters are publicly available inside the context (matrix, colors, etc).\r\nTextures handlers are cached inside the Image object itself, this means that reusing the same images between different Canvas2D context would have a performance penalty.\r\n\r\nExtra features\r\n---------------------\r\n\r\nIt not only provide the Canvas2D functions, it also comes with some extra ones that you can call directly to speed up some processes (like setting colors, modifying the matrix) or even creating some FX that would be hard in a regular Canvas (applying a shader to an image, colorizing an image).\r\n\r\n\r\nDemos \u0026 Benchmark\r\n-----------------\r\nDemos are included in demo folder, you can [test it here](http://tamats.com/projects/canvas2DtoWebGL/demo)\r\n\r\nUsage\r\n-----\r\n\r\nInclude the library and dependencies\r\n```html\r\n\u003cscript src=\"js/gl-matrix-min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"js/litegl.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"js/Canvas2DtoWebGL.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nOnce you have your Canvas created (and before a CanvasRenderingContext2D has been obtained), call this function:\r\n```js\r\nvar ctx = enableWebGLCanvas( mycanvas );\r\n```\r\n\r\nDuring your rendering you must call this two functions, it helps set the flags accordingly.\r\n```js\r\nctx.start2D();\r\n\r\n//your rendering code\r\n//...\r\n\r\nctx.finish2D();\r\n```\r\n\r\nFeedback\r\n--------\r\n\r\nYou can write any feedback to javi.agenjo@gmail.com\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagenjo%2Fcanvas2dtowebgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjagenjo%2Fcanvas2dtowebgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjagenjo%2Fcanvas2dtowebgl/lists"}