Fabric JS - Text Background Opacity
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas {
border: 1px solid #999;
}
img {
display: none;
}
JavaScript
/**
* fabric.js template for bug reports
*
* Please update the name of the jsfiddle (see Fiddle Options).
* This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/all.js).
*/
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// ADD YOUR CODE HERE
// clear canvas
canvas.clear();
// add red rectangle
canvas.add(new fabric.Rect({
width: 100,
height: 80,
left: 50,
top: 50,
fill: 'rgb(255,0,0)',
opacity: 1
}));
// add green, half-transparent circle
canvas.add(new fabric.Circle({
radius: 100,
left: 50,
top: 50,
fill: 'rgb(0,255,0)',
opacity: 0.5
}));
var text = new fabric.Text('Hello World', {
top:80,
left:80,
fontSize:33,
backgroundColor: '#ffffcc',
borderColor:'#000',
opacity: 0.4,
fontFamily:"helvetica"}).setOpacity(0.4);
canvas.add(text);