Falcon80 Logo
Adding bevel to an image

An image can be beveled by adding a blur effect in addition to the shadow effect.

shadowOffsetX = number of pixels offset in the x direction;

shadowOffsetY = number of pixels offset in the y direction;
shadowBlur = number of pixels to be blured in both the X and Y direction;

While you can specify the shadow to be in any color, black/some shade of grey is the most appropriate in creating the desired bevel effect.

HTML Code
<html>
<head>
  <script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");

// Create a new image object
var flower = new Image();

//Provide the source directory of the image you are about to upload.
flower.src = "flower.png";

//Secify the offset and color of the shadow
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 3;
ctx.shadowColor = "black";

// Make sure the image is loaded before you draw it on the canvas
flower.onload = function() {
// Draw the image at location (10,10).
ctx.drawImage(flower, 10, 10);
}
}
}
  </script>
  </head>
<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
</body>
</html>
 
Try Code