StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
19795214
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2013-11-05T17:34:33.470
FavoriteCount
0
LastActivityDate
2013-11-05T17:34:33.470
LastEditDate
LastEditorUserId
0
OwnerUserId
856501
ParentId
19787235
PostTypeId
2
Score
5
ViewCount
0
LastEditorDisplayName
text
Body
Another way to play with light is to use the globalCompositeOperation mode 'ligther' to ligthen things, and just use globalAlpha to darken things. First here's an image, with a cartoon lightening on the left, and a more realistic lightening on the right, but you'd rather watch the fiddle, since it's animated : <a href="http://jsfiddle.net/gamealchemist/ABfVj/" rel="noreferrer">http://jsfiddle.net/gamealchemist/ABfVj/</a> <img src="https://i.stack.imgur.com/4rng6.png" alt="let's play with candles and lights"> So how i did things : To darken : - Choose a darkening color( most likely black, but you can choose a red or another color to teint the result). - choose an opacity ( 0.3 seems a good start value ). - fillRect the area you want to darken. <pre><code>function darken(x, y, w, h, darkenColor, amount) { ctx.fillStyle = darkenColor; ctx.globalAlpha = amount; ctx.fillRect(x, y, w, h); ctx.globalAlpha = 1; } </code></pre> To lighten : - Choose a lightening color. Beware that this color's r,g,b will be added to the previous point's r,g,b : if you use a high value your color will get burnt. - change the globalCompositeOperation to 'lighter' - you might change opacity also, to have more control over the lightening. - fillRect or arc the area you want to lighten. If you draw several circles while in lighter mode, the results will add up, so you can choose a quite low value and draw several circles. <pre><code>function ligthen(x, y, radius, color) { ctx.save(); var rnd = 0.03 * Math.sin(1.1 * Date.now() / 1000); radius = radius * (1 + rnd); ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = '#0B0B00'; ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * π); ctx.fill(); ctx.fillStyle = color; ctx.beginPath(); ctx.arc(x, y, radius * 0.90+rnd, 0, 2 * π); ctx.fill(); ctx.beginPath(); ctx.arc(x, y, radius * 0.4+rnd, 0, 2 * π); ctx.fill(); ctx.restore(); } </code></pre> Notice that i added a sinusoidal variation to make the light more living. Ligthen : another way : You can also, while still using the 'ligther' mode, use a gradient to have a smoother effect (first one is more cartoon like, unless you draw a lot of circles.). <pre><code>function ligthenGradient(x, y, radius) { ctx.save(); ctx.globalCompositeOperation = 'lighter'; var rnd = 0.05 * Math.sin(1.1 * Date.now() / 1000); radius = radius * (1 + rnd); var radialGradient = ctx.createRadialGradient(x, y, 0, x, y, radius); radialGradient.addColorStop(0.0, '#BB9'); radialGradient.addColorStop(0.2 + rnd, '#AA8'); radialGradient.addColorStop(0.7 + rnd, '#330'); radialGradient.addColorStop(0.90, '#110'); radialGradient.addColorStop(1, '#000'); ctx.fillStyle = radialGradient; ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * π); ctx.fill(); ctx.restore(); } </code></pre> i also added here a sin variation. Rq : creating a gradient on each draw will create garbage : store the gradient if you use a single gradient, and store them in an array if you want to animate the gradients. If you are using the same light in several places, have a single gradient built, centered on (0,0), and translate the canvas before drawing always with this single gradient. Rq 2 : you can use clipping to prevent some parts of the screen to be lightened (if there's an obstacle). I added the blue circle on my example to show this. So you might want to ligthen directly your scene with those effects, or create separately a light layer that you darken/lighten as you want before drawImage it on the screen. There are too many scenari to discuss them here (light animated or not, clipping or not, pre-compute a light layer or not, ...) but as far as speed is concerned, for Safari and iOS safari, the solution using rect/arc draws -either with gradient or a solid fill- will be rocket faster than drawing an image/canvas. On Chrome it will be quite the opposite : it's faster to draw an image than to draw each geometry when the geometry count raises. Firefox is rather similar to Chrome for this.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POMultiple light sources on canvas
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USGameAlchemist
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POMultiple light sources on canvas
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTAcceptedByOriginator
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.