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

How to get individual object's width, height, left and top in selection:created event?
Multiple fabric curved text onjects in a single canvas
fabric.js straight line and select on click
Add custom id to each path created using freedrawing
How to determine which (object) control has been clicked?
Fabric.js 1.5 image clipto
Fabricjs canvas objects not rendering properly
Fabricjs update object outside group
Adding id and custom attribute in fabric js
How to write click event in fabric js?
add colorstop dynamically in fabric.js
Fabric.js How to resize IText horizontally without stretching the text
fabricjs IText - Clear Character Specific Styles
Fabricjs triangle management
Render static object in foreground / object invisible to mouse events
Fabric.js save transformMatrix

Categories

HOME
porting
adal
cheerio
ns-3
angular2-material
jmx
xbee
simulink
mips
big-o
nested-if
jtextpane
sendgrid-api-v3
spin
jquery-ui-sortable
flash-player
selectize.js
linear-algebra
mathprog
chargify
google-data-studio
googlebot
ksh
dpdk
imageresizer
qliksense
flask-sqlalchemy
definitelytyped
flooding
outliers
tpm
paperjs
quantlib
errbot
nsurl
magento-1.8
constexpr
custom-controls
userdefaults
eviews
dumpbin
r-grid
android-gridview
instantiation
joomla2.5
indy10
sql-delete
mnist
xajax
salesforce-communities
cin
p4merge
resolution
linqpad
dbnull
ssrs-2014
oim
builder
activeperl
openblas
context-sensitive-grammar
backbone-collections
py2neo
objectscript
pocketsphinx-android
rocks
pacemaker
adafruit
delta
eigenvector
udpclient
tracker-enabled-dbcontext
data-protection
dbamp
hadoop-partitioning
phpwebsocket
piracy-prevention
user-management
jdk1.7
cwrsync
google-refine
delayed-execution
rapidsvn
beatsmusic
mruby
trdion2011
jquery-slider
spring-remoting
dsym
clickbank
accesscontrolexception
mysql-error-1044
ice-cube
pdfviewer
android-loadermanager
mkv
monotouch.dialog
qtconcurrent
subproject
objectquery
appjs
node-redis
workflow-services
matlab-load
dataform
eclipse-marketplace
web-garden
web-application-project
cldc
fail-fast-fail-early
entitykey
mathematical-typesetting
appliance
idatareader

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