{"id":22062759,"url":"https://github.com/ryan-haskell/elm-canvas-things","last_synced_at":"2026-05-18T10:31:19.085Z","repository":{"id":44104669,"uuid":"198520013","full_name":"ryan-haskell/elm-canvas-things","owner":"ryan-haskell","description":"tryna see how i can use elm with the canvas api.","archived":false,"fork":false,"pushed_at":"2023-01-07T08:03:44.000Z","size":1023,"stargazers_count":3,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-24T19:45:17.009Z","etag":null,"topics":["2d","canvas","elm","games"],"latest_commit_sha":null,"homepage":"https://elm-canvas-demo.netlify.com/","language":"Elm","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/ryan-haskell.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}},"created_at":"2019-07-23T22:57:44.000Z","updated_at":"2023-03-07T02:39:06.000Z","dependencies_parsed_at":"2023-02-06T15:31:30.311Z","dependency_job_id":null,"html_url":"https://github.com/ryan-haskell/elm-canvas-things","commit_stats":null,"previous_names":["ryan-haskell/elm-canvas-things"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ryan-haskell/elm-canvas-things","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-canvas-things","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-canvas-things/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-canvas-things/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-canvas-things/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryan-haskell","download_url":"https://codeload.github.com/ryan-haskell/elm-canvas-things/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryan-haskell%2Felm-canvas-things/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33174603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["2d","canvas","elm","games"],"created_at":"2024-11-30T18:26:49.033Z","updated_at":"2026-05-18T10:31:19.063Z","avatar_url":"https://github.com/ryan-haskell.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-canvas-things\n\u003e tryna see how i can use elm with the canvas api.\n\n![Screenshot](./screenshot.png)\n\n## overview\n\nthe html5 canvas api isn't built into elm 0.19, which isnt a problem. elm has [ports](https://guide.elm-lang.org/interop/ports.html) for sending messages to javascript.\n\nmy experiment was to have elm send over a data structure like this:\n\n```elm\ndata =\n  { size =\n    { width = 1920\n    , height = 1080\n    }\n  , background = \"#333\"\n  , items =\n      [ rectangle\n          { color = \"blue\"\n          , x = 0\n          , y = 0\n          , width = 50\n          , height = 50\n          }\n      ]\n  }\n```\n\nas json to some js function like this:\n\n```js\napp.ports.outgoing.subscribe(data =\u003e {\n  canvas.width = data.width\n  canvas.height = data.height\n  // ... fill with `background` color\n  // ... render all `items`\n})\n```\n\nthat way, i could get all the nice, type-safe, elm stuff- but have a bit of js that handles actually calling the canvas api.\n\nit worked out pretty well!\n\ni even got to try out [miniBill/codec](https://package.elm-lang.org/packages/miniBill/elm-codec/latest) for the first time, which was __awesome__! it gave a really nice api for turning my elm data into json.\n\nto see how it performed with updates, i added in some laggy WASD controls for now.\n\n## wanna try it out?\n\n1. `npm install`\n\n1. `npm run dev`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Felm-canvas-things","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryan-haskell%2Felm-canvas-things","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryan-haskell%2Felm-canvas-things/lists"}