fabricjs


Adding text over images in fabricjs


developing this app in which there several images on a canvas and i am using using fabricjs.
i want to add text overlaid on an image and then be able to remove it as well.
is a way to directly write over the image or do i have to create another layer and write onto it.
there is text related like
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?
any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.
any pointers would be most appreciated.
I am not quite clear of what exactly is your requirement.
Regardless of it, i have created a jsfiddle for you. Please visit this.
https://jsfiddle.net/xpntggdo/9/
textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});
canvas.add(textBox);
canvas.renderAll();
This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me. Please upvote if you like it.

Related Links

Fabricjs Set Opacity On Whole Object
How to add an object to ActiveObject?
Fabric.js Merge Multiple Canvas JSON ( or ) SVG
Top-Left coordinates not updated on rotating image using fabricjs
How can i Make a canvas responsive in fabric js?
Is there a method for recalculating/updating the bounding rect of an object in fabric.js?
Pixel manipulation with FabricJS
How to implement exposure image filter using fabricjs basefilter?
Position of scaling points
Loading SVG to a canvas doesn't work
FabricJS Scale/Zoom Canvas to fit container
How to ignore fabric handlers while downloading canvas as image
Fabric.js colors are changing to black in subclassed fabric.Group
Is there any way to by skip Objects in sendToBack operation?
Setting Object align on Canvas
FabricJS - How to set transparent background for the Polyline and her Min/Max value range?

Categories

HOME
polymer
wakanda
ns-3
yandex
parameters
limit
bing-maps
watson-conversation
stellar.js
android-intent
libusb
microsoft-dynamics-nav
dimensional-modeling
imessage
cfml
ag
r-mice
tosca
short-url
xunit
data.stackexchange.com
android-maps
winexe
bringtofront
paperjs
winpe
magento-1.8
quickfixj
github3.py
hunspell
raft
sql-server-ce
spring-mvc-test
plaintext
http-request
avcapturedevice
apache-directory
servermanager
jboss-4.2.x
modelsim
compiler-design
filehandle
dt
reshape
flac
cronexpression
angular2-testing
respondcms
shopping
mediametadataretriever
bizagi
jaunt-api
grgit
zen-cart
finalbuilder
typemock
alloy-ui
theos
metatrader5
memset
high-resolution
android-usb
gtm-oauth2
sphinxql
mbunit
nebula
pclzip
bjyauthorize
onmousemove
oracle-enterprise-linux
pinch
fsevents
u2netdk
uipagecontrol
w3c-geolocation
collectionviewsource
ie-compatibility-mode
spread
wcf-instancing
cldc

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App