{"id":26063262,"url":"https://github.com/kitten/frag-canvas-element","last_synced_at":"2026-04-21T02:03:05.067Z","repository":{"id":279803892,"uuid":"940066519","full_name":"kitten/frag-canvas-element","owner":"kitten","description":"A frag-canvas custom element to apply Shadertoy fragment shaders to a canvas or image/video element","archived":false,"fork":false,"pushed_at":"2025-08-29T07:14:48.000Z","size":146,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-15T21:23:06.317Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/frag-canvas","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/kitten.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2025-02-27T15:03:10.000Z","updated_at":"2025-08-29T07:14:52.000Z","dependencies_parsed_at":"2025-02-27T19:59:49.225Z","dependency_job_id":"0d0369da-ac3c-47ce-a0d4-316b2ec7dd72","html_url":"https://github.com/kitten/frag-canvas-element","commit_stats":null,"previous_names":["kitten/frag-canvas-element"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/kitten/frag-canvas-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Ffrag-canvas-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Ffrag-canvas-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Ffrag-canvas-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Ffrag-canvas-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitten","download_url":"https://codeload.github.com/kitten/frag-canvas-element/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitten%2Ffrag-canvas-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27586450,"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-08T02:00:07.111Z","response_time":58,"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":"2025-03-08T16:34:27.389Z","updated_at":"2025-12-08T02:04:31.621Z","avatar_url":"https://github.com/kitten.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# frag-canvas\n\n**A custom element providing a canvas to apply a fragment shader to.**\n\nThe `\u003cfrag-canvas\u003e` element renders an output canvas and applies a fragment\nshader to it. The canvas' input is either determined by an internal input\ncanvas (that can be drawn to using the usual `getContext()` draw context)\nor an input image or video element, passed as a child element.\n\nThe fragment shader is sourced from a script child or the element's text\ncontents.\n\nThe fragment shader may either be written in GLSL ES 100 or GLSL ES 300,\nbut the internal context will always be created using WebGL 2.\n\nThe fragment shader may use input uniforms that are roughly the same\nas [ShaderToy's](https://www.shadertoy.com/howto) with these\nuniforms being supported:\n\n- `iResolution`\n- `iChannelResolution` (with one channel only)\n- `iTime`\n- `iTimeDelta`\n- `iFrame`\n- `iChannel` (always `0`)\n- `iDate`\n\nOnly one channel will be provided (`uniform sampler2D iChannel0`)\n\n### Applying a fragment shader to an image\n\n```html\n\u003cfrag-canvas id=\"canvas\"\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    precision mediump float;\n\n    uniform vec2 iResolution;\n    uniform float iTime;\n    uniform sampler2D iChannel0;\n\n    void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n      vec2 uv = fragCoord/iResolution.xy;\n      vec4 texColor = texture2D(iChannel0, uv);\n      float wave = sin(uv.y * 10.0 + iTime) * 0.01;\n      vec2 distortedUV = uv + vec2(wave, 0.0);\n      vec4 finalColor = texture2D(iChannel0, distortedUV);\n      fragColor = finalColor;\n    }\n\n    void main() {\n      mainImage(gl_FragColor, gl_FragCoord.xy);\n    }\n  \u003c/script\u003e\n  \u003cimg src=\"./photo.jpg\" /\u003e\n\u003c/frag-canvas\u003e\n```\n\n### Applying a fragment shader to canvas contents\n\n```html\n\u003cfrag-canvas id=\"example\"\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    precision mediump float;\n\n    uniform vec2 iResolution;\n    uniform float iTime;\n    uniform sampler2D iChannel0;\n\n    void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n      vec2 uv = fragCoord/iResolution.xy;\n      vec4 texColor = texture2D(iChannel0, uv);\n      float wave = sin(uv.y * 10.0 + iTime) * 0.01;\n      vec2 distortedUV = uv + vec2(wave, 0.0);\n      vec4 finalColor = texture2D(iChannel0, distortedUV);\n      fragColor = finalColor;\n    }\n\n    void main() {\n      mainImage(gl_FragColor, gl_FragCoord.xy);\n    }\n  \u003c/script\u003e\n\u003c/frag-canvas\u003e\n\n\u003cscript\u003e\n  const canvas = document.getElementById('example');\n  const ctx = canvas.getContext('2d');\n\n  requestAnimationFrame(draw() =\u003e {\n    ctx.fillStyle = 'red';\n    ctx.fillRect(100, 100, 200, 200);\n    ctx.fillStyle = 'blue';\n    ctx.beginPath();\n    ctx.arc(300, 300, 50, 0, Math.PI * 2);\n    ctx.fill();\n  });\n\u003c/script\u003e\n```\n\n### Auto-resizing the canvas while redrawing\n\n```html\n\u003cfrag-canvas id=\"example\" autoresize\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    precision mediump float;\n\n    uniform vec2 iResolution;\n    uniform float iTime;\n    uniform sampler2D iChannel0;\n\n    void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n      vec2 uv = fragCoord/iResolution.xy;\n      vec4 texColor = texture2D(iChannel0, uv);\n      float wave = sin(uv.y * 10.0 + iTime) * 0.01;\n      vec2 distortedUV = uv + vec2(wave, 0.0);\n      vec4 finalColor = texture2D(iChannel0, distortedUV);\n      fragColor = finalColor;\n    }\n\n    void main() {\n      mainImage(gl_FragColor, gl_FragCoord.xy);\n    }\n  \u003c/script\u003e\n\u003c/frag-canvas\u003e\n\n\u003cscript\u003e\n  const canvas = document.getElementById('example');\n  const ctx = canvas.getContext('2d');\n\n  requestAnimationFrame(function draw() {\n    ctx.fillStyle = 'red';\n    ctx.fillRect(100, 100, 200, 200);\n    ctx.fillStyle = 'blue';\n    ctx.beginPath();\n    ctx.arc(300, 300, 50, 0, Math.PI * 2);\n    ctx.fill();\n    requestAnimationFrame(draw);\n  });\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitten%2Ffrag-canvas-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitten%2Ffrag-canvas-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitten%2Ffrag-canvas-element/lists"}