How to create a similar image constructor?

Question

css

Hello, how can I create or copy such a constructor?
https://www.vsemayki.ru/constructor
Close to understanding with canvas.
"""How can I load and display a custom image or text.""(upd)
Tasks: create a clear and pleasant user interface. Avoid reloading the web page when adding your image. Saving the final result.
I think you can do with one js, but I don’t know where to dig.Thanks for any information.Sorry in advance for incompetence.

Answer 1

Canvas

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

Answer 2

Hello!
If you need an online store, then VP has a ready-made plugin for creating such products.
https://codecanyon.net/item/woocommerce-visual-pro...
Demo - https://configuratorsuiteforwp.com/demo/sunglasses/
And if you want to implement it yourself, then Canvas will be the best.