https://github.com/shalithasuranga/canvas-outlines-drawing

Draw outlines for any kind of HTML canvas objects
https://github.com/shalithasuranga/canvas-outlines-drawing

algorithm canvas-outline edge-detection html-canvas outline

Last synced: about 1 month ago
JSON representation

Draw outlines for any kind of HTML canvas objects

• Host: GitHub
• URL: https://github.com/shalithasuranga/canvas-outlines-drawing
• Owner: shalithasuranga
• License: mit
• Created: 2018-01-09T12:22:54.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-09T12:25:40.000Z (about 7 years ago)
• Last Synced: 2024-11-01T17:07:08.093Z (3 months ago)
• Topics: algorithm, canvas-outline, edge-detection, html-canvas, outline
• Language: JavaScript
• Size: 2.93 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Canvas-Outlines-Drawing

## How the solution works

 - Download as zip or clone the repo.

 - Open `index.html` with your browser.

 - Click `Draw Object` or `Draw Image` to draw simple object on the left canvas.  

 - Click `Draw Outline` to Render outline on both canvases.

 - Eventually click `Reset` to start again

 

 

 ## How it works

 

 This solution uses simple edge detection algorithm with `3x3` filter mask.

 

 ### Pseudo Code

 

 ```

 Begin

 Check each pixel of input image

  If mask applies (if at least one pixel hits excluding the middle pixel) put 1 in the resultant array for all applied pixels

  Repeat until entire image is scanned

 Render the resultant array as stroke on both canvases

 End

 ```