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 2 months 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 (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-09T12:25:40.000Z (over 7 years ago)
- Last Synced: 2025-02-13T00:29:12.013Z (4 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
```