I made a chrome extension that can show the cursor’s x,y position in real time: https://github.com/yining1023/WYSIWYGdebugTool
Because p5 is not based on svg, I can’t select any shape from DOM, so I tried rune.js examples.
I made the second chrome extension to select the svg element on the canvas and show their watch points, e.g. line(x1, y1, x2, y2), watch points are x1, y1, x2, y2.
- Show the watch points’ coordinates.
- Show all the watch points for basic shapes (circle, ellipse, rectangle, triangle, beizer)
- Making watching points draggable on the canvas
- Showing the changing coordinates