I’m trying to build and use the canvas-examples from GitHub
but it says it can’t find the module “Color”. Typing “install elm/color” gets me an error message. How can I find this Color module, or alternatively, if canvas-examples is out of date, can you point me to up-to-date examples?
thanks,
Mike
It looks like the Elm Canvas needs Elm 0.18. You can tell since it has an elm-package.json instead of elm.json in the main GitHub repo here. Color module has been removed from the core of version 0.19.
Can you go back to Elm 0.18? This should fix your issues.
Well, my main goal is to use the canvas with the most up-to-date version of elm and the libraries. Is there a modern canvas library?
Is this the most up-to-date canvas library?
There’s a problem building the examples: can’t find module Time. But it does say it can use elm 0.19
I believe there is no pure Elm canvas library for 0.19. joakin/elm-canvas looks to be the most up-to-date, but it uses a web component to translate commands from Elm into imperative API calls for canvas.
There IS an official WebGL library for 0.19, and a library that adapts WebGL for 2d games.
Personally I went with SVG for my game. I wouldn’t say it’s a perfect solution though, SVG is a little weird, and definitely not designed for game rendering. It’s relatively straightforward to use though, if you know HTML/XML.
There is another elm.json for the examples in the folder. Be sure to run elm make from the examples folder to install the examples dependencies.
If the issue you are having is different, I would appreciate a github issue with reproduction steps!
—-
SVG and WebGL are great and have native support in elm, so if you can get past the complexity or they suit your use case, definitely go with them. Otherwise, for simple drawing needs, joakin/elm-canvas is suitable, but a bit harder to setup.
I hope some day we can get back a 2d drawing library in Elm. Given the difficulty curve of Svg and WebGL, I think there is a gap that would be super useful to fill.
Thanks for feedback.
Here’s my problem. I started developing a game with Purescript that relies heavily on the HTML5 canvas. In Haskell, which I learned first, I’m an ‘advanced beginner’ but not an expert. Recently, with my game partly developed, I realized that I can’t handle Purescript – it’s the hardest parts of Haskell combined with almost no documentation. And I’m not experienced with web programming of any sort beyond vanilla Javascript.
So I’m switching to Elm to continue my game.
I’d also like to use Elm for teaching functional programming to my CS tutoring students, high school students who are working with me to learn programming as an extra-curricular. I’ve noticed how friendly Elm is, and how it can make GUIs and graphics without extra fuss, therefore perhaps being a better choice for them than Haskell or Purescript.
Anyway, my game prototype is based entirely on the canvas… what should I do? When you say joakin’s canvas requires a “Component”, I’m not sure what that is or whether it’s a bad thing. If his canvas library works, then my problem is solved.
Well, I need to make sure I have access to all canvas functions. I’m using all the commands for drawing paths (lines, bezier curves, arcs, etc.), drawing text, settling fill style & stroke style & drop shadow, controlling opacity, and using blending modes.
I can’t get elm-canvas to work. All the examples compile, but loading index.html just gives a blank page with no visuals and no logged messages to console either.
https://github.com/wolfadex/thousand-words is a fairly small toy I made with joakin/elm-canvas. The main thing to note is the line <script src="https://unpkg.com/elm-canvas@2.2/elm-canvas.js"></script> in index.html. Without that, the app will compile and load perfectly fine, but won’t run as expected. Also of note, it won’t work on Edge without a polyfill.
wolfadex: your example works as cloned from Github, but if I were to modify it, how do I build it myself? I already tried “elm make src/Main.elm --output me.js” and modified the given index.html to load “me.js” but that didn’t work. Just a blank page.
I built it by running yarn dev and yarn build (for a production build). It’s been a little built since I’ve used elm make, don’t you have to have a script in your HTML that looks like <script>Elm.Main.init();<script>?
Now I’m really confused. I looked up yarn and it doesn’t seem to have anything to do with Elm. How do you build an Elm program with yarn?
Everything here, in this guide, is built with ‘elm make’: and generates an index.html that simply works.
Hey @Michael_Mossey, I get the confusion, js is moving (too?) fast.
Yarn is an alternative to npm. In the package.json under scripts you can find what is actually doing. Eg yarn dev just calls the dev script in the package.json
That said, you don’t need any of this. Elm compiles to js because that’s what runs in the browsers at this point, but the creator made the explicit choice to decouple it from the js ecosystem. The community built those tools just to make it easier to integrate elm into existing js frontend projects.
You can just run elm build Main.elm and open the resulting html file. That’s it.
Hi @brasilikum, I didn’t want to compile to an index.html because elm-canvas needs the extra import
<script src="https://unpkg.com/elm-canvas@2.2/elm-canvas.js"></script>
and I didn’t want to modify the produced index.html every time I compiled. So I compiled to output JS, and figured out that I need to set up an index.html following the instructions here:
https://guide.elm-lang.org/interop/
and just adding that extra script import to what’s mentioned there.
It works now!!
I keep an example sketch that just uses Elm, HTML and a makefile here: https://github.com/joakin/elm-canvas-sketch
It is also linked in the package docs main page, along with a starter Ellie and a bunch of other resources as well.
If it is still too complicated, I suggest going with SVG. The typed-svg package is quite nice https://package.elm-lang.org/packages/elm-community/typed-svg/latest/
There also is timjs/elm-collage, which seems to be modeled after the old elm-lang/collage library.
I haven’t personally used this yet, but from a quick glance this looks very promising 
Hi @joakin, let me apologize for not reading all your docs before asking these questions. I’m new to Elm and I probably shouldn’t have tried to jump into Canvas before learning Elm basics.
I think I know better what’s going on. One question still I have at this point: have you implement text metrics? I can’t find it in the list of Canvas functions.
No worries Michael! I hope you find the library useful.
There are a few canvas APIs that are very imperative and don’t lend themselves to the declarative HTML rendering. They would be doable with Kernel code with a Task or command+subscription API but those are not available for libraries outside of elm/ and elm-explorations.
measureText is one of them, I would recommend using flags or ports and measuring in JS and giving the information to Elm.
This example does measuring in JS and passes the info to Elm vía flags:
There are also a few other omissions from the current version since I’m still thinking about what’s the best way to expose them in a semi efficient and ergonomic way, without complicating installation even more, with the limitations on interop:
drawing images/textures
and using gradients for the fill and stroke style
Feel free to open GitHub issues if you have any problems or hit any bugs 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.