DrawingShape is a robust and interactive canvas-based drawing component designed to capture user input visually with precision and flexibility. It enables users to annotate images or blank canvases by selecting from a variety of predefined shape types that represent different sensations or conditions, including Aching, Burning, Cramping, Crushing, Dull, Numbness, Pins/Needles, Sharp, Stabbing, and Throbbing. In addition, a freehand drawing mode allows users to create custom shapes for more accurate and personalized input.

The component provides an intuitive user interface for selecting shape types and drawing directly on the canvas. Each shape can be visually distinguished, making it suitable for use cases such as pain mapping, medical assessments, body diagrams, or any application requiring categorized visual annotations.

DrawingShape includes essential controls such as a Clear button to remove all drawn elements and reset the canvas, ensuring a smooth user experience during repeated interactions. It also features a Save as Base64 functionality, which converts the current canvas content into a Base64-encoded string. This allows seamless storage, transmission, and integration with backend systems, APIs, or databases without needing file uploads.

The component is built using JavaScript and leverages HTML5 Canvas for high-performance rendering and real-time interaction. It supports dynamic updates, event handling, and easy integration into web applications, including platforms like OutSystems.

Overall, DrawingShape provides a scalable and efficient solution for capturing structured visual input, enhancing user engagement, and enabling accurate data collection in both clinical and non-clinical environments.