The signature generator clearly takes the data from a database and applies it on the background. How do I do that? I don't want to make a signature generator, I'm working on a result page of my website that should do the same on vertical rectangular boxes. Help is highly appreciated.
Offer your help. Be nice!
I've used PhantomJS as a static image generator before, using only HTML/CSS. However, PhantomJS is very outdated, but simple enough to still handle something like this for you. This requires a server. However, it sounds like you want to do this purely on the front-end without your own server?
If that's the case, I recommend using https://github.com/niklasvh/html2canvas to convert HTML/CSS to something that can be saved as an image. So you don't have to be well versed in HTML5 Canvas and can focus on some simple HTML/CSS/JS.
Here's a JSFiddle (not mine) for converting Canvas to a Base64 image that can be downloaded as an image: https://jsfiddle.net/AbdiasSoftware/7PRNN/
Also, be sure to include what tech you're working with to accomplish your goal. It'd help others better answer your question. :)
dear @mr_dave, you can use bootstrap image caption to create that. help link is : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_text