Center.js
Center.js is a HTML5 Canvas based library that allows you to create simple text based icons, avatars, logos, and more. The library assists with drawing simple shapes, centering text, and setting fonts and colors.
Why
Centering text with HTML5 canvas using textAlign and textBaseline has different behavior across browsers and fonts. Center.js removes inconsistencies by manually centering text.
Examples
yarn install
yarn examples
Avatars
Logos
Icons
Usage
The centerjs library takes a canvas object and some configuration.
centerjs({
canvas: document.getElementById("canvas"),
width: 64,
height: 64,
shape: "square",
fontColor: "#581845",
backgroundColor: "#DAF7A6",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
Shapes
There are 3 shapes to choose from:
- square
- circle
- rounded
centerjs({
canvas: document.getElementById("square"),
width: 64,
height: 64,
shape: "square",
fontColor: "white",
backgroundColor: "#FFC300",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
centerjs({
canvas: document.getElementById("circle"),
width: 64,
height: 64,
shape: "circle",
fontColor: "white",
backgroundColor: "#FFC300",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
centerjs({
canvas: document.getElementById("rounded"),
width: 64,
height: 64,
shape: "rounded",
fontColor: "white",
backgroundColor: "#FFC300",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
Dimensions
The dimensions of the canvas can be controlled using the width and height attributes which are measured in pixels.
centerjs({
canvas: document.getElementById("square"),
width: 128,
height: 64,
shape: "square",
fontColor: "white",
backgroundColor: "#FF5733",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
centerjs({
canvas: document.getElementById("circle"),
width: 128,
height: 128,
shape: "circle",
fontColor: "white",
backgroundColor: "#FF5733",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
centerjs({
canvas: document.getElementById("rounded"),
width: 64,
height: 128,
shape: "rounded",
fontColor: "white",
backgroundColor: "#FF5733",
text: "C",
fontFamily: "Helvetica",
fontSize: 48
});
Google Web Fonts
Center.js will work with standard fonts as well as Google Web Fonts. Feel free to use any Google Web Fonts you've loaded via <link> tags. If you need to load Google Web Fonts dynamically then include the Web Font loader in your application as shown below.
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>WebFont.load({
google: {
families: ["Aladin"]
},
active: function() {
centerjs({
canvas: document.getElementById("google-web-fonts-1"),
width: 256,
height: 128,
shape: "rounded",
fontColor: "white",
backgroundColor: "#C70039",
text: "canvas",
fontFamily: "Aladin",
fontSize: 80
});
}
});