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

FabricJS double click new techniques?
Just show some Controls
How to disable multitouch (multiple touches)
Fabric.js _activeGroup error on sub classed images
Fabric.js animation frame by frame
Fabric JS object scaling
fabricjs set boundingrect to the new object after cropping object using clipto method
Objects cannot be selected after canvas is resized
fabricjs diagonal lines hovercursor and selectable
FabricJS delayed drawing?
fabricjs select a group child and change the position
Creating an IText from Text
fabricjs group itext and rectangle within rectangle boundaries
Can I change controlling borders of selected two or more objects in Fabric.js?
Drag & Drop functionality lost when fabric.Canvas is initialized
Fabricjs code boken with strange error

Categories

HOME
shell
microsoftgraph
c++11
string
wakanda
package
database-normalization
permissions
gembox-spreadsheet
android-json
character
line
stellar.js
gource
gruntfile
red5
shortest-path
rubymotion
babel
dataflow-diagram
exploit
xunit
custom-post-type
genexus-sd
angular-translate
sinch
bioinformatics
scatter3d
python-2.6
angularjs-material
simplecv
github3.py
openerp-7
metaprogramming
chef-solo
numberpicker
laravel-elixir
dcmtk
postgresql-8.4
congestion-control
placeholder
android-exoplayer
strftime
snapchat
x++
phpdbg
getchar
httrack
magento-2.0.7
configurationmanager
git-flow
cup
quicktime
flac
cpu-cache
bootstrap-tags-input
actor-platform
hadoop-2.7.2
qtplugin
async.js
mongodb-php
mta
appscale
kango-framework
deep
relativelayout
decimalformat
dynatree
django-urls
binomial-theorem
amiga
alloy-ui
java-security
grouping-sets
delayed-execution
variadic-templates
execve
spring-3
http-patch
breakout
printdialog
rolify
apache-abdera
mkv
faye
httponly
floating-point-exceptions
stress
promotion-code
umra
strsep
collectionviewsource
mtu
commerceserver2007
load-time
windows-identity
wcf-proxy

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile