Yew: How to get node pointer to dom element?

[Boscop]

I want to use canvas fill_rect() on a canvas element in yew. How can I do that?
I need to find a way to get the element's dom node pointer, right? But how?
e.g. html! { <canvas></canvas> }
How to get the pointer to that canvas element, in the yew component's update method, so I can call fill_rect() on it?

[DenisKolodin]

It seems you can use VRef, but I need to investigate this. I want to check yew with Ace editor and I think I'll know the answer after that experiment.

[Kwarrtz]

You should be able to generate and control the canvas using raw stdweb and then wrap it in a VNode::VRef to use it as Yew Html which could then be returned from the view method of your desired Component:

let canvas = web::document().createElement("canvas").unwrap().try_into().unwrap();
let html = VNode::VRef(canvas.into());

To actually be able to control the canvas in your app I think you'd write your own service which holds onto the CanvasRenderingContext2d extracted from canvas.get_context() and then talk to that service. I'm playing around with implementing something like that and if it goes well I might submit a PR. Then we should finally be able to close https://github.com/DenisKolodin/yew/issues/78.

[OptimisticPeach]

@Kwarrtz Any news on this? This seems really interesting, but stdweb seems pretty intimidating in comparison with Yew...

[Kwarrtz]

The short story is: it wasn't as simple as I thought (surprise!).

It's been a while so I don't recall the details, but the gist of it is that I couldn't find a good way to maintain a link between the canvas element (the thing you return from your view function) and the service (the thing you make calls to to actually draw on the canvas). I played with it for a while but eventually decided I didn't understand the framework well enough to make a really viable solution and that the problem was better left to someone else.

If you're interested in picking up where I left off (or if someone like @DenisKolodin wanted to help me work through the kinks) I'd be willing to go back and try to work out the details of what I was trying to do and why I couldn't get it to work again.

[jstarry]

I believe https://github.com/yewstack/yew/issues/665 would solve this issue, re-open otherwise :)