Мне нужно нарисовать фигуру поверх холста HTML5 с помощью курсора мыши, как квадрат или круг; и он должен быть изменен по размеру, тогда, когда пользователь закончит рисовать, координаты формы внутри холста должны быть восстановлены.Как нарисовать фигуры интерактивно поверх холста HTML5?
Любые идеи о том, как я могу достичь этого с помощью JavaScript?
Благодаря
Canvas не знает определенно ничего о природе объектов вы рисуете. Это означает, что после вызова, скажем, метода arc все, что вы получаете, это всего лишь куча пикселей на экране.
Здесь есть два подхода - вы можете написать свою собственную обертку объектной модели над холстом. Каждый раз, когда вы будете рисовать что-то, вы должны хранить информацию об объекте - форму, координаты и все, что нужно. Это довольно достойный подход, но будьте осторожны - это не так уж и тривиально, как можно подумать.
Второй подход - использовать SVG вместо холста и иметь объектную модель из коробки.
Возможно, вам будет интересна библиотека javascript Paper.js. перефразировать сайт intro - «Это обеспечивает рамки векторной графики с использованием холста HTML 5»