How to implement repeatedly called asynchronous data rendering?

Question

C++ / C#

Help me please.
Essence of the question: I try to draw the map asynchronously, if everything happens as planned - the map is displayed for the first time, I change the data (for example, I turn the wheel and change the zoom) - redrawing starts in a separate task - upon completion, the UI thread takes the picture and displays it. Problems begin in non-standard situations, for example, if I change the zoom, the task starts, starts redrawing, I change the zoom again (the previous redrawing has not yet completed), and as a result, it’s unclear what happens.
Initially, I did not think about multithreading, so the architecture is as follows: there are several layers, each with its own class responsible for rendering (different by layer type), each rendering class has its own context, which, in fact, accumulates the rendering result, that is, it is drawn into it. The context does not depend on the thread, that is, the same. When updating, the picture inside the context is cleared and then re-created.
I tried to use CancellationToken, but it does not guarantee the completion of the previous task, you can only declare places where the task can stop execution, that is - the first task is executed, I do CancellationToken.Cancel(), I immediately create the second task - it clears the context data, and the data may still be needed, because the first task has not completed.
I don’t know how to deal with all this correctly, maybe I can redo the logic (to be honest, I don’t even know how), or there is a way to synchronize these tasks.
Thanks in advance.

Answer 1

The context does not depend on the thread, that is, the same.

Here, it seems to me, is the problem.
I would do something like this: if it is necessary to render a new frame, a task is created inside which a context is created, and then this context is run through all renderers, each of which draws the desired layer. The result is given to the GUI Dispatcher.