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 - moving group by selection only one of the item
Importing SVG in Fabric.js is not working correctly
how to resize only object but not pattern
Make text grow uni-directionally on calling set('text', 'some value')
fabric.js make active object on top of others when dragging
How to update size of group in fabricjs
Circle mousedown not working after moving
Any way to stretch/collapse canvas grid in fabric js?
Triggering mousedown/touch and drag and release events in Fabric.js remotely
How to increase the selection area of a fabric Object?
Is it possible to animate filter in Fabric.js?
How to change the image of the fabric.Image object attribute src?
As you can only change the portion of a loaded image?
What is the origin of an image added to a canvas in FabricJS?
Fabricjs Text object fontSize units
fabricjs object / canvas fire an event manually

Categories

HOME
microsoftgraph
google-cloud-platform
jpa
case
jwplayer
spring-data-redis
pclxl
owl-carousel
replace
tivoli
scripting
data-visualization
odoo-8
teechart
spin
fabric.io
heap
3nf
red5
swagger-2.0
visual-glitch
hta
qliksense
beta
syntax-highlighting
android-sharedpreferences
angularjs-components
delimiter
android-maps
userdefaults
dotspatial
anki
kudu
openwhisk
sendbird
vue-chartjs
getpixel
least-squares
fiware-cygnus
openerp-7
salesforce-communities
xcode7.3
linq-to-objects
p4merge
hackintosh
smoothstate.js
spring-integration-sftp
user-defined-fields
reportservice2010
mongotemplate
wpas
azure-cli
headless
gpg-signature
flac
cpu-cache
trigger.io
py2neo
choice
slackware
mapxtreme
android-dateutils
respondcms
embedding
lua-telegram-bot
dbamp
fuzzywuzzy
ellucian-scribe
pushbots
wiredep
slash
eoferror
canvg
google-refine
j-security-check
openbabel
nodelist
browserify-shim
iso-prolog
strawberry-perl
parallel-testing
dct
paste
authlogic
artemis
isqlquery
ui-select2
kaleidoscope
jquery-1.9
insert-id
vfs
paginator
objectquery
lambdaj
httponly
apache-commons-dbutils
timthumb
tmx
socketserver
uideviceorientation
updatesourcetrigger
purepdf
dojo-dnd
sifr3
wysiwym
int64
java1.4
mathematical-typesetting

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