Как осуществить функционал гравировки?

Question

[andrash_]

Как создать подобный функционал гравировки на часах?
Например вводим в input текст, этот текст транслируется на картинку с часами. Затем передать отдельным пунктом в корзину

Comments

[zorca]

Вот так

[andrash_]

zorca, Вопрос не в том, как текст закруглить.

[geektimer]

andrash_, а в том, как написать код под конкретный случай? Берете картинку часов в качестве бэкграунда, сверху накладываете SVG с текстом по выше указанному примеру. Либо в лоб, на canvas

[hzzzzl]

andrash_, а я как раз не умею закруглить, но если стилизовать покрасивше, то как-то так
https://jsfiddle.net/n64hsmkf/

[andrash_]

hzzzzl, ахах) то что нужно)

Answer 1

[Sashqa]

https://codepen.io/kotovaa/pen/KKPgePV

Answer 2

[RAX7]