Canvas event listeners

I’m fairly new to PureScript. I noticed that some handling of side-effects have changed recently… things seem to be using Effect now rather than Eff. This is related to my question, because I’d like to add an event listener to a canvas. My understanding is that in JS, you register a call back with an event listener. I’ve been looking for tutorials on callback in PureScript but I’m wondering if they are out of date now.

So, can someone give me a hint how to implement an event listener on a canvas, maybe pointing me to a modern tutorial or maybe giving me some example code?


1 Like

Chapter 9 in the PureScript by Example book is about canvas.

1 Like

Chapter 9 doesn’t mention callbacks or event listeners, as best I can tell, so it’s not much help.

PSBE uses Eff rather than Effect. In addition, the purescript-canvas library seems to be broken in purs 0.12. So I’m having a hard time following PSBE.

There’s lots of PureScript projects on Github. You can try searching for projects which use canvas, then find one which looks like it’s using canvas events:

Search using a term like this:

Here’s one project I found which might be what you’re looking for.

It doesn’t solve the 0.12 problem, though.

I recently was playing with purescript-canvas
( )

I’ve been using bodil’s signal library which has been ported to 0.12. I’d recommend following that approach. You can easily enough pass a purescript function that emits a signal value to javascript to use. Remember to add an extra () when calling this function because effectful purescript functions require it.

I used this as a dependency, as it looks like the port forward hadn’t been accepted yet.

Farily certain everything else is up to date with 0.12.

Hi prozacchiwawa:
I’m looking at your code. I don’t completely understand signals yet, but I had one question. I see you use ‘animationFrame’ from Signal.DOM to create a signal which generates a new time after every change in the animation time. I also see that you have the line:

timeSignal <- unwrap (map (\_ -> now) frames)

I don’t know if I misunderstand, but this looks like it’s taking a signal that is already the state of the current time, and then mapping ‘now’ on it. Would that not be redundant?

I wrote other stuff to use Data.DateTime.Instant so I mapped it to now from purescript-now.
It’s redundant in the sense that there’s already a Time coming through…
Probably should use a proper abstraction that can accept either but it was mostly messing around.