How to organize object scaling in HTML5 canvas (JavaScript)?

Question

JavaScript

Hello. So I drew several objects, how can I scale them on the stage? I know about the scale method, which scales the whole scene, but I need separate groups of objects on the same scene.
If there are no ready-made solutions and you have to write the logic yourself, how would you do it? It's one thing to scale a single primitive, but what about a group of objects? If you reduce all objects individually, what about their alignment?

Answer 1

When working with a regular canvas, you do not have the ability to change a single object. To work with individual objects, use, for example, oCanvas .

Answer 2

Let's say we have a scene with several elements.
We create a scene object "var DrawScene=function() {}" in which we declare all the parameters for drawing, in private functions we do various auxiliary calculations.
Then through "DrawScene.prototype.drawElement1=function() {}" we draw each object on the scene.
The last function is initialization, in which we run all the functions for drawing objects and add a call to our constructor. (also do not forget about the canvas clearing function)
You can look at an example https://github.com/GM2mars/GM_gauge/blob/master/gm... drawing a circular scale.
So we got the scene rendering object, where we can draw each object with its own parameters.
But we use canvas, so the image is raster (displayed by pixels) and it will not work to scale the element on the stage separately. Each time you have to redraw the scene completely.
For dynamic scenes, it is better to use svg, where you can control each object separately without affecting others.
ps Or create a separate canvas for each element and manipulate it.