We Keep Coding

Text height of specific character in Fabric.js

I have a text object in fabric.js that I am creating with:
fbText = new fabric.Textbox('#TEST', {
width: 700,
fill: '#303846',
top: 150,
left: 50,
fontSize: 150,
textAlign: 'left',
fixedWidth: 700,
// fontWeight: 'bold',
editable: false,
originY: 'center',
styles: {
// first word of text i.e Test
0: {
//first letter of first word i.e T
0: { fill: '#21bba6', fontSize: 130}
},
}
})
I would like to make the 1st letter higher than the rest of the word. Any thoughts on how that might be possible?
This is what I want to happen:
This is currently happening:

You can use deltaY negative value. There are more available style properties that can be used, have a look at [http://fabricjs.com/docs/fabric.Textbox.html#_styleProperties][1].
var fbText = new fabric.Textbox('#TEST', {
...,
styles: {
0: {
0: {
fill: '#21bba6',
fontSize: 130,
deltaY: -30
}
},
}
})

FabricJS - Why after updating text inside group, the group width does not automatically adjust its width accordingly

Seen Behavior
I have an issue with updating canvas elements inside a group after initialization.
I created a basic app that on initialization creates a group containing several elements: font icon(text object), title, description and rect in order to create a border for the group.
Is there any way to solve this problem that dosen't require me to remove and re add the group back to the canvas?
after reading faricjs documentation canvas.renderAll should be enough what am i missing?
Expected Behavior
The Group object that is rendered to the DOM needs to adjust its width according to the new width of the text object in the DOM.
Essentially re-render this individual group object without causing a full re-render of all the other objects in the canvas.
Issue Reproduction Demo
I was able to reproduce the issue here: http://jsfiddle.net/almogKashany/k6f758nm/
Using setTimeout I update the title of the group but the title of the group does not update (even after calling group.setCoords or canvas.renderAll)
SOLUTION
Thanks to #Durga
http://jsfiddle.net/gyfxckzp/

Call addWithUpdate after changing width of rect or text value, so it will recalculate the group dimension.
DEMO
var canvas = new fabric.StaticCanvas('c', {
renderOnAddRemove: false
});
var leftBoxIconWidth = 70;
var placeholderForIcon = new fabric.Text('ICON', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: 10,
top: 20,
originX: 'left',
lineHeight: '1',
width: 50,
height: 30,
backgroundColor: 'brown'
});
var title = new fabric.Text('', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: leftBoxIconWidth,
top: 5,
originX: 'left',
lineHeight: '1',
});
var description = new fabric.Text('', {
fontSize: 20,
fontWeight: 400,
fontFamily: 'Roboto-Medium',
left: leftBoxIconWidth,
top: 25,
originX: 'left',
lineHeight: '1',
});
title.set({
text: 'init title'
});
description.set({
text: 'init description'
});
var groupRect = new fabric.Rect({
left: 0,
top: 0,
width: Math.max(title.width, description.width) + leftBoxIconWidth, // 70 is placeholder for icon
height: 70,
strokeWidth: 3,
stroke: '#f44336',
fill: '#999',
originX: 'left',
originY: 'top',
rx: 7,
ry: 7,
})
let card = new fabric.Group([groupRect, title, description, placeholderForIcon]);
canvas.add(card);
canvas.requestRenderAll();
setTimeout(function() {
title.set({
text: 'change title after first render and more a lot text text text text'
});
groupRect.set({
width: Math.max(title.width, description.width) + leftBoxIconWidth
})
card.addWithUpdate();
// here missing how to update group/rect inside group width after title changed
// to update canvas well
canvas.requestRenderAll();
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>

How to blur text in React Native

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.
The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".
How can we blur a Text component in React Native?
Info: I just want to make an app where the user does not see the answer directly (via blurring).

If you don't want to install react-native-blur / expo-blur or it's not working for you, this is a workaround/hack that mimics the look of blurred text in a View. The values can be adjusted as necessary.
<View
style={{
height: 3,
width: 70,
shadowOpacity: 1,
shadowColor: '#000',
shadowOffset: { width: 10, height: 10 },
shadowRadius: 5,
elevation: 5,
borderWidth: 0.5,
borderColor: "white",
backgroundColor: "rgba(255, 255, 255, 1)"
}}
/>

Install react-native-blur:
npm install react-native-blur
import BlurView from 'react-native-blur';
...
<BlurView blurType="light" style={styles.blur}>
...

You can simply use css to do it, feel free you change the amount of opacity, offset, color, radius as your requirement
<Text
style={{
color: "#fff0",
textShadowColor: "rgba(255,255,255,0.8)",
textShadowOffset: {
width: 0,
height: 0,
},
textShadowRadius: 10,
fontSize: 14,
fontWeight: "600",
textTransform: "capitalize",
}}
>
Blurred
</Text>

Why can't we check a style attribute of a react-native app?

I wanted to check whether color is white of an element, as follows,
if(styles.background=='white')
console.log("ok")
console.log(styles.background=='white') --> was false [1]
why [1] returns false?

In your case styles is a StyleSheet object.
You need to use the StyleSheet.flatten function as below:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
var styleObj = StyleSheet.flatten([styles.container])
console.warn(styleObj.backgroundColor==='#F5FCFF') //=>true
To process a prop style of a component you could use it as below:
let backgroundColor = Stylesheet.flatten(this.props.style).backgroundColor;
You can find the source code of the function here:
https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/flattenStyle.js
Sources and more details here:
https://facebook.github.io/react-native/docs/stylesheet.html
https://stackoverflow.com/a/35233409/1979861

Just want to make sure the parameter passing syntax is correct.
(Note: the square brackets surrounding the parameter are not needed.)
For single form style sheet:
var styleObj = StyleSheet.flatten(styles.container)
For multiple-form style sheet:
var styleObj = StyleSheet.flatten(styles[1].container)
Then you can print it as a dict to exam the attributes:
console.log(styleObj)

Font weight in fabric.js library for HTML5 canvas

I've been playing with canvas and the awesome fabric library. I can't get text to display in anything other than the normal weight. i.e.
var text2 = new fabric.Text('tseting', {
fontsize: 50,
fontFamily: 'Arial',
fontStyle = 'bold',
left: 100,
top: 100,
fill:"#FF0000"
});
canvas2.add(text2);
The 'bold' tag doesn't get applied. When I created the font.js file suing cufon, I included the bold and italic fonts. Any ideas gratefully received.

You've used the wrong property, and a typo ( the fontStyle = 'bold',).
Use this instead:
var text2 = new fabric.Text('testing', {
fontSize: 50,
fontFamily: 'Arial',
fontWeight: 'bold',
left: 100,
top: 100,
fill: "#FF0000"
});
canvas2.add(text2);

fontStyle refers to italic / normal.
Try fontWeight: bold or fontWeight: 700?