How to make an interactive designer for working with an image on the site?

Question

Image processing

The task, it would seem, is simple - you need a certain designer on the site, similar to those used on sites selling T-shirts with an individual pattern. That is, conditionally, on the left the user has a preview of the finished product, and on the right are various tools - text, ready-made templates, drawings, etc. that can be applied to this product. As soon as a person is satisfied with the result, he clicks "send" and we make a product according to his design.
Tell me, in which direction is it better for a beginner to dig in order to make such constructors on their own? Perhaps there are ready-made libraries or services specially tailored for this? I have experience in programming microcontrollers in C, I can change the design elements of a wordpress site to suit my needs, I am familiar with mySQL, but I have not yet gone into web development. I will be glad to any advice.

Answer 1

Toad Script rules))
I worked with this one. LIBA Figured it out in a couple of days, no experience. Collages in the form of json are saved in the database, easily loaded into the editor and restore the saved image.
There are articles on habré (Russian language (!)), google.

Answer 2

First of all, this is JavaScript, you need to do all these interactive things on it. You can just throw HTML blocks, you can draw them in the canvas, or you can use SVG, there are many options. It is convenient to use some framework (Vue, React).
It's hard to give specific advice, you need knowledge of JS to make such a thing.