Canvas Based Beveled Corners With JavaScript – Chamfer.js

Chamfer.js is a JavaScript library that applies canvas based responsive Beveled (chamfered) borders to any block elements such as images, divs and more.

How to use it:

Include the ResizeObserver polyfill for the responsive borders.

<script src="dist/ResizeObserver.js"></script>

Include the main JavaScript file chamfer.js right before the closing body tag.

<script src="dist/chamfer.js"></script>

Apply the Beveled (chamfered) borders to your elements as follows:

ChamferEnvelop(el, {
  // options here
});
// or
ChamferBg(el, {
  // options here
});

All possible options with default values.

{
// border side
size: 5,
// stroke width
sw: 1,
// stroke color
sc: 'black',
// fill color
fc: undefined, 
// image to use as fill pattern
fp: undefined,  
// enables Chamfer.js on top-left corner?
tl: true, 
// enables Chamfer.js on top-right corner?
tr: true, // chamfer top-right corner?
// enables Chamfer.js on bottom-left corner?
bl: true, // chamfer bottom-left corner?
// enables Chamfer.js on bottom-right corner?
br: true, // chamfer bottom-right corner?
// enables/disables resize observer
resize_observe: false
}