html5-canvas


removing the applied styles to IText


I have a IText object added in canvas where I change the style of each word in the text dynamically , here style is updating fine , but I am not being able to clear the previous style applied . hence each time new style is overridden on previous
function updateStyle(){
clearItextStyle();
var letterArray =getLetterIndex(iText.getText());
var counter=1;
for(var i=0;i<selectionArr.length;i=i+2){
iText.setSelectionStart(selectionArr[i]);
iText.setSelectionEnd(selectionArr[i+1]+1);
switch(counter){
case 1:
iText.setSelectionStyles({"textDecoration":"underline"});
break;
case 2:
iText.setSelectionStyles({"textDecoration":"overline"});
break;
case 3:
iText.setSelectionStyles({"textDecoration":"line-through"});
break;
}
counter++;
if(counter>3){
counter=0;
}
}
canvas.renderAll();
}
function clearItextStyle(){
text.setSelectionStart(0);
text.setSelectionEnd(iText.getText().length-1);
text.setSelectionStyles(null);
canvas.renderAll();
}
function clearItextStyle(){
text.remove();
text=addIText(); // Initialize IText object here again
canvas.add(text);
canvas.renderAll();
}
To clear a "textDecoration" style for an IText element, you can set that style to "none", e.g.
text.setSelectionStyles({"textDecoration":"none"});
reset styles of an itext object:
itext.styles = { }; // -> space is important
canvas.renderAll();
Then you can add back styles.

Related Links

Google web font doesn't work in html
kineticJS Uncaught TypeError: Type error
what is in the HTML5 toDataURL?
Animate (Oscillation) custom drawn shape on Canvas
3d Models Augmented Reality Javascript (js-aruco)
Draggable element in KineticJS that is “under” another?
Three.JS - DAE Animation Without Skins
How to use Flot canvas plugin
canvas issue on chrome mobile
paint application with kinetic js
HTML5 Canvas API
How to add subscript and superscript text in kinetic text
Tween after dragging doesn't start to the drag-end position (with KineticJS)
How to Get Display Object width using createjs framework in html5
try google webfonts on html5 canvas every method: standard, #import, javascript and webfont loader, neither work
drawImage() on canvas saturates colors and messes up alpha

Categories

HOME
actions-on-google
demandware
google-search
music
lua
pyqt5
auth0
parse.com
sql-server-2012
garbage-collection
jbpm
documentation
wget
regression
akka.net
jena
research
openmodelica
postgresql-9.5
qualtrics
accumulo
raspberry-pi2
phpbb3
jquery-selectors
zap
freetype
git-bash
co
many-to-many
spark-graphx
shape
physics
desire2learn
paket
x-sendfile
c++builder-5
ocean
pvlib
ose
tensor
sieve-of-eratosthenes
json-rpc
microsoft-translator
runge-kutta
extjs4
rft
nomenclature
google-slides
subscription
mamp-pro
tern
permgen
quicksand
adsutil.vbs
ewsjavaapi
requirements-management
xssf
jasmine2.0
database-cleaner
fasta
paypal-webhooks
android-identifiers
haste
lapply
tfs2008
git-config
printscreen
cglib
ocsp
file-management
android-number-picker
qlpreviewcontroller
facebook-comments
cucumber-java
screen-capture
dbfit
uat
uikeyboard
par
symbian
json4s
devenv
error-log
gem
jasmin
catalina.out
xacml3
batman.js
disabled-input
pligg
ccombobox
webcal
geometry-surface
virtual-earth
dependency-walker
hudson-plugins
xsocket
clean-urls
makumba
calloc
datakey
freeglut
sticky-footer
duplicate-data
having
etrade-api
symstore
jboss-cache
xtratreelist
pinging
crc-cards
palm-pre
variable-names

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App