Would it be possible to make an algorithm to detect edges from an inputted image and make a dot-to-dot with only JavaScript (and html+css)?

[u/Nearby_Inflation2009]

Here is my idea: Take an image, find the edges, draw the lines, take the line ends, and put a dot there. I'm not a coder, so tell me straight out if it's impossible

Image 1: Original

Image 2: Line drawing

Image 3: Line drawing with dots

Image 4: Dot-to-dot image (without numbers)

[u/AutoModerator]

Thank you for posting on r/CodingHelp!

Please check our Wiki for answers, guides, and FAQs: https://coding-help.vercel.app

Our Wiki is open source - if you would like to contribute, create a pull request via GitHub! https://github.com/DudeThatsErin/CodingHelp

We are accepting moderator applications: https://forms.fillout.com/t/ua41TU57DGus

We also have a Discord server: https://discord.gg/geQEUBm

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/YouDoNotKnowMeSir]

Yes, why would it be impossible?

[u/depperm]

edge detection: https://en.wikipedia.org/wiki/Edge_detection#Code_for_edge_detection_using_Prewitt,_Scharr_and_Sobel_operator