Draw on a Canvas using Selenium WebDriver

Use Selenium WebDriver Advanced User Interactions API to draw and manoeuvre objects in a Canvas on a web page

This article is included in my “How to in Selenium WebDriver” series.

We can use Selenium WebDriver’s Advanced User Interactions API to drive mouse events to ‘draw’ on a canvas on a web page. In this article, I will show how to draw markers on a body chart (background image) in the WhenWise app, with the following operations:

• Drag a circle to the back neck.
• Draw a shape of “X” and move it to the right chest
• Change brush colour to blue
• Draw an arrow, rotate it and point to the left elbow
• Add text on canvas

Here it is.

Animated GIF showing the operations driven by Selenium WebDriver

1. Move the circle to the back neck.

The script:

driver.find_element(…