How to Draw a Custom Circle on an Image in React Image Editor?

This article explains how to programmatically draw a custom circle on an image in React Image Editor using the drawEllipse method when clicking on the Image Editor component.

Draw a Custom Circle

To draw a circle on an image at the point where the user clicks, you can use the drawEllipse method inside the click event handler of the Image Editor component. This method allows you to specify the position and size of the ellipse to be drawn.

In the example below, the click function is triggered whenever the user clicks on the image. It receives the click coordinates (args.point.x and args.point.y) and uses them to draw a circle with a width and height of 100 pixels, centered at the clicked location. The drawEllipse method is called on the Image Editor instance, which is accessed via the imgObj reference.

const click = (args) => {
   imgObj.current.drawEllipse(args.point.x, args.point.y, 100, 100);
 };
 return (
           <div className="e-img-editor-sample">
             <ImageEditorComponent
               id="image-editor"
               ref={imgObj}
               created={imageEditorCreated}
               click={click}
             ></ImageEditorComponent>
           </div>
 ); 

Screenshot

Live Example

You can view a working sample here: Sample Example

Conclusion

I hope you enjoyed learning about how to draw a custom circle on an Image in React Image Editor.

You can refer to our React Image Editor’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Documentation to understand how to present and manipulate data.

For current customers, you can check out our React components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our React Image Editor and other React components.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums,Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!