Each time the canvas is clicked a circle is moved to, and drawn at, the position of the mouse. The circle's position is stored in a MongoDB collection and updated each time the mouse is clicked. On startup and once every second thereafter, the circle's coordinates are retrieved from the MongoDB collection circles
.
Project setup and structure is similar to the previous button click example. The one key change is that this example requires an additional npm dependecy to be installed.
npm install body-parser --save
This is used to parse the x and y coords that are sent from the client to the server in the body of a HTTP PUT request.
Example output (client on left, node/express server on top-right, MongoDB view in Compass on bottom-right):