Canvas Based Beveled Corners With JavaScript – Chamfer.js

Category: Javascript | January 31, 2018
Author: MISoftware
Views Total: 1,156 views
Official Page: Go to website
Last Update: January 31, 2018
License: MIT


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


You Might Be Interested In:

Leave a Reply