Creating an outline for single basic HTML canvas object is very simple since we are able to use
lineWidth property on canvas context. Where as if we need to draw outline for complex object such as combination of basic elements or png image with some transparent portions we have to use another approach.
Pixel level manipulation can be used with
context.getImageData() method which gives pixel data (
r g b a) of entire canvas
How Masking method Works
Very first I am saving the transparent and non-transparent details to 2D array
Thereafter I am using
3x3 mask to detect edges. Mask is sliding over each pixel and if it detects transparent pixel (
a = 255) it colors every transparent pixel and also the middle pixel. Then the 2D array
B will be constructed with outline details.
Eventually result will be rendered in the HTML canvas.
Canvas-Outlines-Drawing - Draw outlines for any kind of HTML canvas objects
Originally published at shalithasuranga.me on January 9, 2018.