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

Rotate and scale within fabricjs bounding box
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

Categories

HOME
sonarqube
assembly
google-cloud-platform
wakanda
rdbms
mstest
package
jsf-2.2
cakephp-3.4
tail
regular-language
spring-session
frontend
computer-science
syntaxnet
heap
watson-conversation
supervisor
mongodb-csharp
chargify
sigma.js
bourbon
googlebot
ember-cli
ios10.2
surveymonkey
opentk
quantlib
bioinformatics
vex
userdefaults
kudu
simplecv
installshield-le
indy10
batching
apic
lint
google-earth-engine
graphhopper
xdocreport
demo
mongoose-schema
parser-generator
preloader
show-hide
openal
yii2-api
appdomain
filehandle
mach-o
juice-ui
pytables
autosar
custom-lists
iotivity
tinkerpop3
burrows-wheeler-transform
ng-grid
udpclient
embedding
ellucian-scribe
nio2
phpgrid
tfs-workitem
iokit
r-package
dllimport
pypiserver
morton-number
typemock
primitive-types
wcm
rmysql
draw2d-js
solace-mq
dtmf
scringo
font-awesome-4.0.0
qi4j
jquery-blockui
qtconcurrent
xcode3.2
os.system
cuda-gdb
objectquery
apache-commons-dbutils
xcelsius
automationelement
tournament
massive
diagrams
timertask
openfaces
silverlight-oob
feasibility
alsb
fdf
sqlobject
httpcookie
lemmatization

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App