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

use svg as a pattern background in NODE is not working
How to get the edited text from itext in fabricjs
How do I get the shadow color value of some text in Fabric JS?
Move and rotate line by one point
How can I let the user resize an element non-proportionally with a corner control?
Fabric.js: Create placeholders for images on canvas & export canvas as image?
How do i make all the shapes selected, i mean shapes must always be activated so that i do not need to click any shape
What is the expected gesture/tap event to edit FabricJs IText on mobile?
fabricJS Not persisting Floodfill
How to trigger the moving event for objects with their lockMovement properties set to false?
FabricJS: How to rotate a single path object in path-group?
Export FabricJS canvas to PNG/JPG with Images in it
Fabric.js: How to serialize clipTo objects since ToJSON does not work for it?
fabricjs 1.6.3: why active object is always shown on top
Fabricjs and relative paths for image urls
Call fabricjs event continuously

Categories

HOME
batch-file
phantom-dsl
string
apache-spark-mllib
devise
bitbucket-api
yandex
xbee
switch-statement
permissions
web-hosting
square
jquery-ui
android-json
angularfire2
owin
google-form
flash-player
mathprog
dimensional-modeling
red5
vuejs
template-engine
git-extensions
production
user-experience
babel
cgbitmapcontext
postscript
php-mysqlidb
tiki-wiki
stackexchange
entity-relationship-model
intersystems-cache
openmdao
bioinformatics
postback
r-grid
hibernate-search
processwire
getlasterror
ideascript
z-notation
protein-database
gdata
comparison-operators
magento-1.9.3
movilizer
tcc
uiimage
x++
libgphoto2
hammer.js
singleinstance
opengl-4
headless
bootstrap-tags-input
greatest-n-per-group
cifilter
cfchart
kango-framework
turbo-prolog
grass
aspen
contentcontrol
sapi
java-money
binomial-theorem
haskell-warp
alloy-ui
matlab-deployment
jquery-forms-plugin
public-html
structuremap3
iso-prolog
webfinger
tweenlite
create.js
named-parameters
dot42
draw2d-js
mutual-authentication
paste
menubar
square-bracket
qscrollarea
observium
cardreader
booksleeve
dopostback
android-loadermanager
onmousemove
monotouch.dialog
thttpd
josql
oracle-enterprise-linux
isa-swizzling
fsevents
automationelement
diagrams
ruby-1.8
uideviceorientation
jqueryform
pos-for-.net
entitykey
pbcopy
leader
image-capture
appliance

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile