html canvas shadow being applied to everything
If you define a shadow ONCE, then it applies to all "graphics" on the canvas from thereon after (which is what it's supposed to do).
Sample:
http://flanvas.com/development/flanvas/test.html
Does anyone know best practice to turn the shadow off after you've used it? I'm setting shadowColor to "rgba(0,0,0,0)" which is a no-alpha black. I'm sure there is a better way.
case sample: The text is also getting a shadow. I'm using the no-alpha black to combat this for now.
http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html
html5 canvas shadow
add a comment |
If you define a shadow ONCE, then it applies to all "graphics" on the canvas from thereon after (which is what it's supposed to do).
Sample:
http://flanvas.com/development/flanvas/test.html
Does anyone know best practice to turn the shadow off after you've used it? I'm setting shadowColor to "rgba(0,0,0,0)" which is a no-alpha black. I'm sure there is a better way.
case sample: The text is also getting a shadow. I'm using the no-alpha black to combat this for now.
http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html
html5 canvas shadow
add a comment |
If you define a shadow ONCE, then it applies to all "graphics" on the canvas from thereon after (which is what it's supposed to do).
Sample:
http://flanvas.com/development/flanvas/test.html
Does anyone know best practice to turn the shadow off after you've used it? I'm setting shadowColor to "rgba(0,0,0,0)" which is a no-alpha black. I'm sure there is a better way.
case sample: The text is also getting a shadow. I'm using the no-alpha black to combat this for now.
http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html
html5 canvas shadow
If you define a shadow ONCE, then it applies to all "graphics" on the canvas from thereon after (which is what it's supposed to do).
Sample:
http://flanvas.com/development/flanvas/test.html
Does anyone know best practice to turn the shadow off after you've used it? I'm setting shadowColor to "rgba(0,0,0,0)" which is a no-alpha black. I'm sure there is a better way.
case sample: The text is also getting a shadow. I'm using the no-alpha black to combat this for now.
http://flanvas.com/development/flanvas/examples/filters-dropShadowFilter.html
html5 canvas shadow
html5 canvas shadow
edited Jan 10 '11 at 19:01
Phrogz
222k80542621
222k80542621
asked Jan 10 '11 at 18:03
JacksonkrJacksonkr
17.8k34138234
17.8k34138234
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
By using save
, translate
and restore
you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X
& Y
are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0
.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
add a comment |
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
add a comment |
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f4649883%2fhtml-canvas-shadow-being-applied-to-everything%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
By using save
, translate
and restore
you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X
& Y
are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0
.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
add a comment |
By using save
, translate
and restore
you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X
& Y
are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0
.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
add a comment |
By using save
, translate
and restore
you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X
& Y
are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0
.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
By using save
, translate
and restore
you can perform your tasks without worrying about the style changes, for eg.
ctx.save();
ctx.translate(X,Y);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// do some stuff
ctx.restore();
here X
& Y
are the co-ordinates where you intended to draw and you do your stuff relative to the co-ordinates 0,0
.
This method solves the problem of caching and restoring the previous styles/values and is also very helpful when you work with gradients as they are always plotted relative to the origin (0,0)
answered Jan 11 '11 at 9:28
Livingston SamuelLivingston Samuel
2,18221634
2,18221634
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
add a comment |
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
1
1
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
Excellent point. This solution works really nicely in more complex cases (less things to keep track of).
– Juho Vepsäläinen
Jan 20 '11 at 15:03
add a comment |
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
add a comment |
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
add a comment |
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
(EDIT: Oops! I see that's what you were already doing with a 0 alpha black.)
This is what you were looking for:
context.shadowColor = "transparent";
edited Dec 12 '12 at 14:04
answered Dec 12 '12 at 13:58
Hugh ManHugh Man
8112
8112
add a comment |
add a comment |
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
add a comment |
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
add a comment |
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
It's usually a good idea to store the old value of these kind of "global" attributes before you change it and use this stored value to restore it later on. Example:
var origShadowColor = ctx.shadowColor;
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
// ... do some stuff
ctx.shadowColor = origShadowColor;
answered Jan 10 '11 at 18:08
Juho VepsäläinenJuho Vepsäläinen
21.1k66693
21.1k66693
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f4649883%2fhtml-canvas-shadow-being-applied-to-everything%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown