StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POProblems clearing canvas when animating a clipping region
primarykey
Id
15029164
data
AcceptedAnswerId
15230220
AnswerCount
2
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2013-02-22T16:49:32.910
FavoriteCount
1
LastActivityDate
2013-03-05T17:24:16.900
LastEditDate
2013-02-22T17:10:33.420
LastEditorUserId
686036
OwnerUserId
2095875
ParentId
0
PostTypeId
1
Score
0
ViewCount
561
LastEditorDisplayName
text
Body
I'm trying to accomplish an effect similar to what you might see on the cartoon Chowder (<a href="http://youtu.be/EDcICGLpybQ?t=29s" rel="nofollow">example link</a>) , where shapes serve as masking layers for a texture underneath that stays static. I've begun playing around with this idea by creating a render loop that clears the canvas, saves it's state, then draws a rectangular clipping region, followed by drawing the background texture that occupies the entire width and height of the canvas. Here's the draw function: <pre><code>function draw() { context.clearRect(0,0, 640, 480); context.save(); x += velocityX; y += velocityY; context.rect(x, y, 40, 40); context.clip(); context.drawImage(image, 0,0, 640, 480); context.restore(); } </code></pre> Basically it just runs at 60 frames per second, updating the position of the rectangle and clipping a background image inside the clipping region. (I know the code isn't structured perfectly, but I was just experimenting to see if this effect was even possible on the canvas). <a href="http://jsfiddle.net/JERje/86/" rel="nofollow">http://jsfiddle.net/JERje/86/</a> The problem I seem to be having is that the clipping area from the previous iteration of the loop hangs around creating the weird effect that you see in the fiddle above. I've tried reordering everything in the <code>draw()</code> step of the loop, but the only thing that seems to work is the <code>canvas.width = canvas.width</code> trick for clearing the screen. I'd like to avoid this method of clearing the screen, since it doesn't seem to work in IE, and it also destroys the canvas <code>state</code>. <code>clearRect()</code> should work to clear the screen. What am I doing wrong?
Tags
<javascript><html5><animation><canvas><clipping>
Title
Problems clearing canvas when animating a clipping region
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USblo0p3r
UserOwnerUserId
1. USJeremy Simms
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POProblems clearing canvas when animating a clipping region
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTApproveEditSuggestion
2. VO
 singulars
 PostPostId
 POProblems clearing canvas when animating a clipping region
 UserUserId
 USJeremy Simms
 VoteTypeVoteTypeId
 VTFavorite
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.