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

fabric.Image.fromURL show errror when load large images in FIREFOX
Text always displays under image in Fabric.js
fabric.loadSVGFromURL when called in a loop always call the last callback
fabric.js 1.4.0 - How can I get animation and gestures support?
Change dimensions of controls frame around clipped object
how to use fabricjs for synchronizing data between a and b client browers
Set changed mirror object to previous state using fabricjs
Prevent pattern from scaling when object scales
Fabric - IText flipY baseline position
Fabric.js canvas boundary detection
Fabric.js - re-build and commercial use
How to address an Image in Fabric.js
Scale some object but not others in a Fabric group?
Fabric.js - SVG export
How to apply filter to canvas backgroundImage in Fabric.js
Connect two elements with an arrow in Fabric.js

Categories

HOME
google-app-engine
prism
flex
solaris
knitr
flume
performancepoint
p2p
g++
text-mining
jsonpath
gource
soci
production
gmm
replication
undertow
squashfs
named-entity-recognition
ios10.2
event-store
exploit
monit
windows-server-2003
ms-access-web-app
linked-data
uitapgesturerecognizer
realm-mobile-platform
testbed
contacts
yowsup
lubridate
sharepoint-workflow
openproject
cd
health-monitoring
metaprogramming
chef-solo
unordered-map
setup.py
comparison-operators
watchface
placeholder
xbmc
hammer.js
yii2-api
trojan
aquamacs
amq
truezip
testrail
simplepie
omxplayer
pacemaker
adafruit
tinkerpop3
dotnetnuke-7
uicolor
watch-os-2
x-tag
data-protection
turbo-prolog
ellucian-scribe
mobiledoc-kit
ess
ons-api
atoi
vacuum
sha512
mirror
typeconverter
grouping-sets
delayed-execution
rapidsvn
iso-prolog
formview
angular-carousel
vsx
menubar
observium
nevron
actiondispatch
font-awesome-4.0.0
superscrollorama
argouml
nokia-s40
sentestingkit
correlated-subquery
floating-point-exceptions
relative
fsevents
umra
django-paypal
undefined-index
ie-compatibility-mode
updatesourcetrigger
django-piston
filesystemobject
java1.4
netbeans6.1

Resources

Encrypt Message