fulcro 2023-05-06 | Slack Archive

Harry12:05:47

I think this is relating to the fulcro load order: I am working off example 6 in the dev guide. I am trying to render a png onto the canvas using drawImage, and the following code: (defn render-hover-and-marker "Render the graphics in the canvas. Pass the component props and state. " [canvas props coords] (let [size (:size props) img (js/Image.) imgsrc "test.png" ; See HTML5 canvas docs ctx (.getContext canvas "2d") clear (fn [] (set! (.-fillStyle ctx) "white") (.fillRect ctx 0 0 size size)) drawImg (fn [] (set! (.. img -src) imgsrc) (.drawImage ctx img size size))] (.save ctx) (clear) (drawImg) (.restore ctx))) But I don't get anything. I think I need to use window.onload but not really sure how to implement that into fulcro (Can't see anything in the docs)? Thanks in advance!

tony.kay14:05:07

This is less of a fulcro question, and more of a react question. React is in control of the Dom. By default rendering is a pure function, meaning that you cannot side effect, meaning that in the rendering as you figured out, you need some other mechanism to trigger your low level JavaScript canvas side effects. The easiest way to do this in modern versions of react is to use hooks. There are hooks wrappers, or you can call them directly. But I think what you want is probably useEffect (use-effect from hooks namespace). See the react docs

tony.kay14:05:20

Combined with useRef to get the canvas Dom element

Harry04:05:17

drawImg (fn [] (set! (.. img -src) imgsrc) (set! (.-onload img) (fn [] (.drawImage ctx img 0 0 size size))) ) Ended up being the solution but it refreshed every cycle so I switched to setting the background image using css and swaping clear from fillRect to clearRect in case anyone else is having similar troubles!

Björn Ebbinghaus07:05:20

(@U0558HTJE6Q you can create multi-line code blocks with three ticks)

(fn foo [x]
  (+ 1 2 x))

😍 2

2023-05-06

Channels