Develop Reference

pixijs text is cutted

I'm trying to draw text in pixijs app stage and the text is cut off a bit. See the screenshot below.
I've tried to put it inside container but I can't fix it.
const style = new PIXI.TextStyle({
fontFamily: 'Bangers',
fontSize: 256,
fontWeight: 'bold',
fill: ['#ffa512', '#ff9e00'], // gradient
stroke: '#fff',
strokeThickness: 5,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 2,
});
const richText = new PIXI.Text('Nagitto', style);
richText.x = 50;
richText.y = 250;
app.stage.addChild(richText);
No exceptions.
I'm using a font from google fonts.

Use padding property inside style.
padding: 5,
I suggest you can use https://pixijs.io/pixi-text-style/# to dynamically create text with a preview.

The text is hardly cut from the code you wrote to create it. In my experience, this is only happening when there is a mask on the stage.
Please show the code for your container where you add the text in.

organizing MANY hexagons

im creating a boardgame, with a hexagon shaped tilebased map. i used konva to create the hexagons/polygons. the way i went about it was to just create a variable for each polygon, but this ended up as a 1000+ lines of code (as the map has about 50 hexagontiles) so im wondering if there is a more efficient way since its hard to keep track of so many lines of code.
this is how 1 polygon looks. (im intending to place a sprite, where the player will be able to move the sprite such as in chess, moving from one tile to another by clicking the mouse etc.)
var polyA = new Konva.RegularPolygon({
x: 600,
y: 400,
sides: 6,
radius: 400,
rotation: 90,
stroke: "black",
strokeWidth: 5
});
and here is the code for loading the tiles. as you can see its very long.
board.add(polyA, polyB, polyC, polyD, polyE, polyF, polyG, polyCr, polyDr, polyEr, polyFr, polyGr, polyA1, polyB1, polyC1, polyD1, polyE1, polyF1, polyCr1, polyDr1, polyEr1, polyFr1, polyGr1, polyB2, polyC2, polyD2, polyE2, polyF2, polyG2, polyCr2, polyDr2, polyEr2, polyB3, polyC3, polyD3, polyE3, polyCr3, polyDr3, polyEr3, polyFr3, polyB4, polyC4, polyD4, polyE4, polyCr4, polyDr4, polyEr4, polyB5, polyC5, polyD5, polyCr5, polyDr5, polyEr5, polyB1u, polyC1u, polyD1u, polyE1u, polyF1u, polyCr1u, polyDr1u, polyEr1u, polyFr1u, polyGr1u, polyB2u, polyC2u, polyD2u, polyE2u, polyF2u, polyG2u, polyCr2u, polyDr2u, polyEr2u, polyB3u, polyC3u, polyD3u, polyE3u, polyCr3u, polyDr3u, polyEr3u, polyFr3u, polyB4u, polyC4u, polyD4u, polyE4u, polyCr4u, polyDr4u, polyEr4u, polyB5u, polyC5u, polyD5u, polyCr5u, polyDr5u, polyEr5u);
stage.add(board);

Adding filter to pattern image of shape in fabric.js

I am trying to apply a filter to the pattern image of shape but receiving numerous errors. I googled a lot but still cannot find a solution that works. Below is my code. Q 1. Is it even possible? Q 2. How to achieve it!?
var canvas = new fabric.Canvas('c1');
var circle = new fabric.Circle({
radius: 100, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
loadPattern('http://i0.wp.com/www.illustratoring.com/wp-content/uploads/2012/12/chevron-pattern-illustrator.png?resize=40%2C40', circle);
function loadPattern(url, obj){
fabric.util.loadImage(url, function(img) {
obj.setPatternFill({
source: img,
repeat: 'repeat'
});
canvas.renderAll();
});
}
here is the JSfilddle https://jsfiddle.net/eepmzy9n/2/ I want to apply filters to the pattern image.

Yes, this should be possible using the fabric js filters. Combining patterns and filters shouldn't be an issue.
Info on image filters:
http://fabricjs.com/fabric-intro-part-2/#image_filters
http://fabricjs.com/image-filters/
Other code examples using filters:
Fabric js image filter
How to apply filter to canvas backgroundImage in Fabric.js

Creating WordArt text effects -FabricJs

I am using fabricJs to create wordArts where one can scale, rotate, transform the texts.
The approach would be rotate and skew every character in text at a certain angle.
I am using Itext class of fabric to style each character
here is what I have done but it isn't working.
var canvas = new fabric.Canvas('c')
var text= "Test fabricJs"
var comicSansText = new fabric.IText(text, {
fontFamily: 'Comic Sans',
left: canvas.width/4, top: canvas.width/2 ,
stroke: '#ff1318',
strokeWidth: 1,
strokeStyle:"#fff",
styles:[[{"fill": "red",
"fontSize": 20,
"angle":30,
"transform":"rotate(30deg)"}]]
});
Refer fiddle here http://jsfiddle.net/swesh/c7s9x2fh/

To enable Curved text, you've to add fabric.CurvedText.js.
Download fabric.CurvedText.js
After that, you can set the angle.
Its working for me.

How do I make a <ul> or bullet in fabric.Text()?

I am looking for an example application that takes user input and inserts it into a inside canvas with fabric.js. Is this possible? I haven't been able to find a lists in fabric.js example.

canvas.fillText does not accept HTML markup.
A Canvas is a bitmap, it has nothing to do with HTML markup.
You can control font style as described here.
There are libraries that convert XML markup into canvas.fillText calls, maybe you could adapt one.

I realized a better way to solve this issue was to draw a circle at the same height as the text, at radius 2, to emulate a bullet point. for anybody interested its easy as:
var EDU1 = new fabric.IText("SOME TEXT GOES HERE", {fontSize: 20, fontStyle:
'italic',fontFamily: 'Hoefler Text', left: 149, top: 390});
var bullet = new fabric.Circle({
radius: 2, fill: 'black', left: 135, top: 400
});
then group them together and you have a bullet point.

function ListStyle (textObject,type,canvas) {
var styles=['\u25CF','\u25C8','\u25D8','\u25BA','\u25CB','\u25A0','-'];
var allStyles={'bullet':'\u25CF','diamond':'\u25C8','invertedBullet':'\u25D8','triangularBullet':'\u25BA','disced':'\u25CB','squared':'\u25A0','dashed':'-','none':''};
var text = textObject.text;
var textArray = text.split('\n')
var tempStr = [];
textArray.forEach((text, i) => {
if(styles.includes(text.substr(0,1))){
tempStr.push(text.replace(text.substr(0,1),allStyles[type]));
}else{
tempStr.push(allStyles[type]+''+text);
}
})
textObject['text'] = tempStr.join('\n');
canvas.renderAll();
}
ListStyle (canvas.getObjects()[0],'diamond',canvas);