Draw gradient bevel around polygon
<p>Basically I need to create a falloff texture for given polygon. For instance this is the image I have</p>

<p><a href="https://i.stack.imgur.com/ksmoE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ksmoE.png" alt="enter image description here"></a></p>

<p>What I need to create is this, but with bevel gradient from white to black, consider the green part as gradient. </p>

<p><a href="https://i.stack.imgur.com/CmeDa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CmeDa.png" alt="enter image description here"></a></p>

<p>I've got the coordinates of all the vertices and the thickness of the bevel. I'm rendering using HTML5 2d canvas. Basically the most obvious solution would be to calculate every pixel's distance to the polygon and if it's within the thickness parameter, calculate the color and color the pixel. But that's heavy calculations and would be slow, even for smallest possible texture for my needs. So are there any tricks I can do with canvas to achieve this?</p>