Question

I’m making a UI application in java and I was trying to draw some graphics to represent a compass in a window. I’m handling the rotation with the mouse dragged event on my canvas but the problem is that everything in my canvas is rotating. I’d like to know if I can handle every elements I draw in my canvas separately so only my arrow will move and not the whole canvas.

Thanks

Answer 1

Presumably you’ve got a draw loop that draws a bunch of things. Background, compass, arrow for the compass. Maybe some other things.

When you draw with a canvas you issue commands to the context that are akin to loading up a paintbrush with paint.

If you want to paint a red line and then a blue line you pick up some red paint, paint one line, then clean your brush and pick up some blue paint and paint that line.

The canvas context is exactly the same. What you want to do here is paint a bunch of things on a normal canvas context. Then you want to save the context with ctx.save() and do your rotations.

When you translate or rotate or even just set a fill on the context you aren’t changing things that were already done, you’re just saying “for everything after this point, apply these operations.”

So then you paint the compass arrow/needle.

Then call ctx.restore() and continue on your merry way. This will stop the rotation from happening to things drawn after the arrow.

the save and restore functions of the context keep track of the old state so that you aren’t drawing everything after the needle with a rotated context. It’s kind of like washing a paintbrush, only better, because you can remember that it used to have blue on it instead of having to wash it clean every time.

By the way, if you do want to reset your canvas context to its default state completely (black brushes, default transform, no shadows, etc), you can simply do canvas.width = canvas.width and it will give the context a full reset.