How to insert a canvas into the body ?

[wangxiaochuTHU]

I failed to find a guide to creating&inserting a canvas. After reading the official book, I guessed and tested out that the inserting pattern might be somehow like

html!{
    <canvas id = "my_canvas"> {" some text"} </canvas>
}

However, where to call its creating function (say fn create_my_canvas) puzzles me much.

fn create_my_canvas() -> HtmlCanvasElement {
   ................................
   canvas
}

I found only one related example mount_point, but this example is far different from and inconsistent with the patterns shown in official book. Besides, this example compiled with errors saying that the crate yew has no function start_app_in_element.

Above all, my question would be threefold:

1. what's the pattern to insert a canvas with a default context.
2. what's the pattern to insert a canvas with an external input (I mean something like plotters)
3. where can I learn all the inserting patterns for all supported html tags.

Thanks for giving any guidelines.

[ranile]

The webgl uses canvas for rendering. Take a look at it.

Also, it seems your problem stems from not being able to get a reference to an element. See node refs for that.

I assume you're using master Yew. If you're not, please look at the same pages but for 0.18:

• webgl example
• node refs

[wangxiaochuTHU]

I missed both examples for any reason and yes, node refs is the key concept, thanks very much!

[mc1098]

On the plotters point, I remember someone saying that they used plotters with yew in our Discord, so I went looking :D

I found that it was @saona-raimundo and the project is online_plotters which also has a hosted example on Github pages so you can see it in action. The project uses Yew 0.18.0 so the latest. I haven't looked through the project but I thought I'd mention it, hope it helps!

Hope you don't mind the ping @saona-raimundo, just wanted you to get credit and know that your project might help the community too 🤗.

[wangxiaochuTHU]

Thanks a lot. online_plotters is really a good example, from which I've learnt so much.

[saona-raimundo]

@mc1098 Thank you for the ping!
@wangxiaochuTHU, my smallest working code is in examples: simple. If the canvas manipulation is not so clear there (because of all the input handling to plot mathematical functions), just let me know and I will try to help :)