Canvas Based Beveled Corners With JavaScript – Chamfer.js

Category: Javascript | January 31, 2018
Views Total:1,809 views
Official Page:Go to website
Last Update:January 31, 2018


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