Allow user to add and resize shapes - html

Question

I want to allow a user to add shapes/resize them, with a shape panel like the one on this page:
https://logomakr.com/
I have read into this and the use HTML canvas seems inevitable. My issue is allowing the user to add more than 1 of each shape and allowing the user to resize each shape.

Answer 1

You can achieve that using a JavaScript canvas library, called FabricJS.
ᴅᴇᴍᴏ
var canvas = new fabric.Canvas('c');
function addRectangle() {
var rectangle = new fabric.Rect({
top: 65,
left: 65,
width: 50,
height: 50,
fill: '#03A9F4'
});
canvas.add(rectangle);
}
function addTriangle() {
var triangle = new fabric.Triangle({
top: 65,
left: 65,
width: 50,
height: 50,
fill: '#4CAF50'
});
canvas.add(triangle);
}
function addCircle() {
var circle = new fabric.Circle({
top: 65,
left: 65,
radius: 25,
fill: '#f44336'
});
canvas.add(circle);
}
body { margin: 10px 0 0 0 }
canvas { border: 1px solid #ccc }
button { margin-top: 9px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<canvas id="c" width="180" height="180"></canvas>
<button onclick="addRectangle()">Add Rectangle</button>
<button onclick="addTriangle()">Add Triangle</button>
<button onclick="addCircle()">Add Circle</button>
To learn more about this library, refer to the official documentation.