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

lockScaling for Fabric.js objects
Fabric.js: front and back views
Dragging in Fabric.js
Using glfx.js filters in Fabric.js
Fabric.js loadFromJSON width/height properties deserialization
Fabric.js - text decoration looks not exactly right
Fabric.js flipX and flipY don't seem to work
originX and originY are not set to center by default in 1.3.9 [closed]
How to get polygon points in Fabric.js
Creating and selecting a group programmatically with Fabric.js
Load from JSON is not working with Patterns in the latest version of Fabric.js
Load from JSON in Fabric.js loading default properties
How to `lockscaleX` and `lockscaleY` but allow `uniscaling` the object in Fabric.js?
canvas.toDataURL to Wordpress Library
Set object drag limit in Fabric.js
How to know the degree of rotation of the Fabric.js object?

Categories

HOME
android
windows
go
cheerio
github-for-windows
redux-form
swt
xbee
soa
nested-if
onclick
spring-session
owin
vimdiff
emoji
opengl-es-3.0
openbugs
nancy
selenium-ide
qsqlquery
internationalization
glyphicons
cfml
connector
charles
microsoft-ocr
poedit
libigl
pagespeed
object-storage
resourcebundle
comparator
syntax-highlighting
datastax-enterprise-graph
constexpr
custom-controls
recurring-events
kudu
mustache
quickfixj
playstation-portable
fstream
github3.py
dynamic-jasper
alphabetical
google-knowledge-graph
imagenet
z-notation
odroid
verifiable-c
cin
signals-slots
setup.py
claims
jquery-ui-draggable
corruption
singleinstance
boxing
otp
flyout
objectscript
django-1.10
qtplugin
mongodb-php
query-by-example
piracy-prevention
jnlua
jdi
doctype
batik
lasso
typemock
branch-and-bound
snoop
uvc
kubuntu
bcache
public-html
delayed-execution
viewer
cocos3d
mobility
grails-domain-class
malformedurlexception
artemis
ice-cube
kaleidoscope
chart-director
alice
android-loadermanager
subgraph
josql
mapping-by-code
wiimote
infobright
cgimage
htdocs
filemerge
mysql-error-1205
quotation-marks
tmx
metaweblog
zen
opml
request-headers
dsoframer
commercial-application

Resources

Encrypt Message