This tool is built using a standard HTML <canvas> element and simple JavaScript logic to enable all drawing functions directly in your browser:

1. Image Upload & Canvas:

   • You upload an image file from your device.
   • The tool takes your image and loads it onto an HTML <canvas> element. This canvas acts as the interactive drawing surface where all your doodles and annotations will be placed.

2. Drawing and Mouse Events:

   • When you press your mouse button or touch the screen on the canvas, the tool recognizes this as the start of a new drawing action. It tracks the position of your cursor or finger as you move it.
   • As you move your mouse or finger, the tool continuously draws a line segment from your last position to your current position, creating a smooth, freehand line.
   • When you release the mouse button or lift your finger, the drawing action is considered complete.

3. Eraser Mode:

   • To use the eraser, the tool changes a key setting called globalCompositeOperation to 'destination-out'.
   • This setting tells the canvas to draw with transparency, effectively “erasing” pixels wherever you draw.
   • When you switch back to the pen, this setting is reset, and the tool resumes drawing with solid colors.

4. Undo/Redo History:

   • Every time you complete a drawing stroke, the tool saves a snapshot of the entire canvas. This snapshot is stored in a drawingHistory array as a DataURL—a text-based representation of the image.
   • When you click the undo button, the tool simply loads the previous snapshot from the history array, effectively stepping back in time. The redo button does the opposite.

5. Download:

   • When you are finished, the “Download Image” button uses the canvas.toDataURL() method to convert the final state of the canvas (your original image with all the annotations) into a downloadable PNG file, which is saved to your computer.