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

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?
Setting textAlign on a per line basis of a text/iText/textbox object
set Min and Max resize limits for fabric object
Fabricjs move object to layer
FabricJS line - what is the correct way of combining left/right/x/y properties?
Fabric JS how to address a SVG
character width calculation wrong with some font which can make auto indent
fabricjs - Image zoom and cropArea
use svg as a pattern background in NODE is not working

Categories

HOME
google-cloud-platform
awk
time-complexity
apache-flink
jmeter
dns
jmx
rsa
swt
replace
nuget-package
missing-data
computer-science
arangodb
minecraft-forge
opengl-es-3.0
comsol
xmonad
boost-icl
libigl
visual-studio-extensions
object-storage
google-api-client
tiki-wiki
opentk
mat
inversion-of-control
mql
sqsh
erb
laravel-eloquent
hard-drive
sendbird
hunspell
hibernate-search
html-encode
least-squares
reason
xcode7.3
mcustomscrollbar
datacachefactory
movilizer
snapchat
x++
servermanager
ovf
opennms
globalize
mschart
vugen
pair-programming
er-diagram
janus
structuremap4
taocp
ziparchive
spring-cloud-feign
burrows-wheeler-transform
neon
gogs
simevents
kango-framework
stream-processing
riot
ikiwiki
createprocess
fink
thread-sleep
nio2
phpgrid
qt5.2
file-move
avahi
google-refine
java-security
packet-sniffers
tweenlite
nsmenu
verold
notorm
sphinxql
c++builder-xe5
script#
time.h
android-icons
android-sdk-2.3
argouml
resource-management
onmousemove
saleslogix
boost-signals
lambdaj
jdb
luabind
uipagecontrol
inline-formset
unattended-processing
ajax-polling
hbm2java
message-passing
zend-rest
request-headers
lalr
tui
todos
online-storage

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile