stefanloerwald
commented
1 year ago Hi @Bram1903,
Your ideas on how to solve this all sound good to me, but I haven't done that task myself so far, so can't speak from experience in how to achieve this.
I think layering is an elegant approach, as it's very easy to reason about the state of both the background and the foreground.
In terms of finding out best practices, I'd recommend looking at the html canvas documentation, as well as on stackoverflow. You can search for pure JavaScript solutions, as translating it to this library is trivial (either use the async methods, so you'd essentially camel case every method and append async, or you use context.JS.methodnamegoeshere(...)).
Saving state is not the right choice though. You can see that using the documentation here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save This method saves the state of certain rendering properties, not whatever has been drawn so far.
Hope that helps! Stefan
Hello,
Firstly I would like to thank you for maintaining this library. I have used it for a bit now, and it works great!
As my title implies, I have a question. I aim to have a basic sketch on the canvas, representing a track layout so that I can then draw the riders positions on the track layout, without having to recreate the track layout on every rider position update.
My question is, what would be the best way to achieve this?
Of course, I can redesign the entire track every time a rider changes his position, but that feels a bit inefficient. Therefore I'm trying to find a way to only draw the rider positions on it.
I already tried setting the layout once, and then updating the positions every second, but that resulted in the previous location being present as well. Am I overlooking something here?
I also thought of layering the canvasses, but I don't see any way of doing that, as that doesn't seem to be an implementation. This would basically mean that I have the track layout and that another canvas is being drawn on top of it, so when I clear the second canvas the first canvas keeps its drawings.
Besides the above I also noticed a
_context.CanvasState.SaveAsync();and a_context.CanvasState.SaveAsync();. I'm not entirely sure what this option does, since I can't find any documentation (I may be blind 😅). I assume that as the name implies it saves the current state of the canvas, and you can restore that state at a later point. However when I tried doing so by creating the base layout, saving that state, and every time I want to update a rider his location I reset the canvas and place the new position on the canvas, but that doesn't seem to do anything.I'm most probably overlooking something, and I hope you are so kind as to give me some advice, as to how I could tackle this in the best way!
Thanks in advance, Bram