{"id":19218231,"url":"https://github.com/greggman/webgl-canvas-2d","last_synced_at":"2025-05-13T00:13:01.060Z","repository":{"id":140563882,"uuid":"178128314","full_name":"greggman/webgl-canvas-2d","owner":"greggman","description":"A minimal implementation of the canvas 2D API through WebGL","archived":false,"fork":false,"pushed_at":"2019-03-30T09:41:56.000Z","size":56,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-13T00:12:53.637Z","etag":null,"topics":["canvas","graphics","html","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/greggman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-03-28T04:49:06.000Z","updated_at":"2025-04-10T03:57:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"16a378b8-92ec-4bab-93f6-2371b39df1fa","html_url":"https://github.com/greggman/webgl-canvas-2d","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2Fwebgl-canvas-2d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2Fwebgl-canvas-2d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2Fwebgl-canvas-2d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greggman%2Fwebgl-canvas-2d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greggman","download_url":"https://codeload.github.com/greggman/webgl-canvas-2d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253843222,"owners_count":21972874,"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","graphics","html","webgl"],"created_at":"2024-11-09T14:25:49.079Z","updated_at":"2025-05-13T00:13:01.043Z","avatar_url":"https://github.com/greggman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebGL-Canvas-2D\n\na minimal implementation of the canvas 2D API through WebGL.\n\nThis is not intended to actually work. It's just something for fun\n\nThe only API currently supported are\n\n```\nclearRect\nfillRect\ndrawImage\nfillStyle\nglobalAlpha\nsave\nrestore\ntranslate\nrotate\nscale\nsetTransform\n```\n\nFor `drawImage` only `Image` is supported and the image must already be loaded\nand its `src` must not change.\n\nTo use include these scripts\n\n```\n\u003cscript src=\"3rdparty/twgl-full.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"3rdparty/m3.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"webgl-canvas-2d.js\"\u003e\u003c/script\u003e\n```\n\nThen you can create a `WebGLCanvas2DRenderingContext` with\n\n```\nconst ctx = new WebGLCanvas2DRenderingContext(someCanvas);\n```\n\nNote that it does not handle canvas resize automatically. To resize you have 2 options.\n\n(a) call `canvas.resize`\n\nExample\n\n```\nif (canvas.resize) {\n  canvas.resize(newWidth, newHeight);\n} else {\n  canvas.width = newWidth;\n  canvas.height = newHeight;\n```\n\n(b) call `ctx.updateSize`\n\n```\ncanvas.width = newWidth;\ncanvas.height = newHeight;\nctx.updateSize();\n```\n\nYou can also use the shim which makes it create `WebGLCanvas2DRenderingContext`s automatically.\nOf course that means you can't create a normal 2D context, only this limited context.\n\n```\n\u003cscript src=\"webgl-canvas-2d-shim.js\"\u003e\u003c/script\u003e\nconst ctx = someCanvas.getContext('2d');   // this is a WebGLCanvas2DRenderingContext\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreggman%2Fwebgl-canvas-2d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreggman%2Fwebgl-canvas-2d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreggman%2Fwebgl-canvas-2d/lists"}