Develop Reference

How to cache static canvas areas in order to gain performance

I am using createjs library, and my game has a large bitmap on the background, in order to fill a window in full HD resolution. In lower resolutions i use a pan and scan like method. But the action is always limited in a smaller area of the canvas.
So i would like to know if it is possible, and how, to gain performance by caching static areas, or using any other technique.
For the sake of the argument here is a graph that demonstrates my situation :
I 've already tried to put the background image behind the canvas element using CSS here :
How to center a canvas on top of a background image
But CSS is driving me insane...so please bear with me...
:)
Thank you in advance!

In EaselJS every DisplayObject has a cache method, which is exactly doing what you want - it takes the painted stuff and puts in on a off-screen Canvas: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html
Afterwards it takes the image-data from the off-canvas for every repaint (basically it's just a drawImage call afterwards).
Try to only cache painted areas - if you cache empty areas, you will lose performance. However if your background is just a static image you should still keep it as a normal DOM/CSS background - there isn't any performance benefit from caching a bitmap.

I had the same idea once, and I think what you are asking for is getImageData() and putImageDate()
image = context.getImageData(x,y,width,height);
context.putImageData(image,x,y);
However, I still found the performance of this to be very poor (sorry, I can't provide any actual numbers any more), and the best and also most popular way to achieve better performance seems to be to make a second canvas just for the background, or, if you really just have a static background image, use pure CSS like you originally wanted.
context.drawImage() can also draw from another canvas element, maybe you can utilise this in some way and create inivisible "canvas caches". But I still think that it's easier to learn CSS than implement something like this.

I am not familear with createjs, but you can try to draw / clear only on active area. This way you will not redraw inactive areas with each frame.
if inactive areas are not completely static, you can use separate canvas elements for them, and draw those on the main canvas once something have changed on that area (inactive area). I ho

clearRect() not working in html5 canvas

I wrote a function whose purpose is to re-draw a square line block (which cover whole page) every time when the window size is changed.
http://jsfiddle.net/9hVnZ/
The problem is that
bgCtx.clearRect(0, 0, bgCtx.width, bgCtx.height);
didn't work for me: As my Chrome browser size changed, the previous red lines does not clear as I thought.
reproduced screenshot:
http://i.imgur.com/6aePMLm.png
I tried browse other answered questions, some of their cases are missing bgCtx.beginPath(); but I did include it, andbgCtx.width = bgCtx.width; doesn't work, either, am I missing something or anything wrong?
Any suggestion would be appreciated :)

You're creating a new canvas element on every draw().
Fiddle

HTML5 Canvas Ghosting Animation Issue?

I have been looking at plenty of tutorials on how to do proper HTML5 animations using javascript and request animation frame and even in the demos it seems like the animations look blury like the image being redrawn leaves a ghosted image of itself behind for a breif second. But then I see games like microsofts ported version of cut the rope that appears to have fixed this issue. Does anyone know a way to make this canvas effect less apparent?

I'm guessing the problem you have is that the new image is being redrawn before the previous image was cleared. I suggest making sure the canvas is cleared, or at least the area in which the image is being re-drawn. Although, I experimented with clearing the whole canvas vs clearing a specific section of the canvas, and up to a certain size (roughly 800x600), clearing the whole canvas was faster.
I use canvas for my (in-progress) game: http://www.dacheng.me/dBoom
Feel free to browse the JS source code!

I think what you're looking for is window buffering:
http://en.wikipedia.org/wiki/Multiple_buffering
Basically the idea is to use two different windows/canvas elements that are interchanged after being drawn completely so that you're switching between fully drawn "frames". This technique is used in OpenGL and almost any other legitimate graphics program that exists today.

Html5 Flickering Javascript

I am working on a basic game in javascript. I don't use jQuery. The thing is that I have trouble in getting rid of the flickering. I noticed it happens because of the canvas clearing command. I read a lot of suggestions that recommended a sort of double buffering like having a buffer canvas on which I should draw which is not visible and another canvas which is visible and all the content is copied from the buffer. However, I doubt that even if I implement this I would still have the flickering as I still have to clear the visible canvas.
The final question is : What is the best way of getting rid of the flickering in my code? Thank you for your help.
this is a sample of my code:
http://edumax.org.ro/extra/new/Scratch.html

In your draw() method you call loadImages(), hence loading the images every time you redraw, ie every time the apple moves, hence the flickering.
Just put some breakpoints in your draw method it will all become pretty clear.
I guess what you want to do is to load the images at loading time then just draw... no need to load on every move.

HTML Canvas Tracing

I'm trying to build something in HTML5/Canvas to allow tracing over an image and alert if deviating from a predefined path.
I've figured out how to load an external image into the canvas, and allow mousedown/mousemovement events over it to draw over the image, but what I'm having trouble getting my head around is comparing the two.
Images are all simple black on white outlines, so from what I can tell a getPixel style event can tell if there is black underneath where has been drawn upon or underneath where the mouse is on.
I could do it with just the mouse position, but that would require defining the paths of every image outline (and there are a fair number, hence ideally wanting to do it by analyzing the underlying image)..
I've been told that its possible with Flash, but would like to avoid that if possible so that compatability with non-flash platforms (namely the ipad) can be maintained as they are the primary target for the page to run.
Any insight or assistance would be appreciated!

I think you already touched upon the most straight-forward approach to solving this.
Given a black and white image on a canvas, you can attach a mousemove event handler to the element to track where the cursor is. If the user is holding left-mouse down, you want to determine whether or not they are currently tracing the pre-defined path. To make things less annoying for the user, I would approach this part of the problem by sampling a small window of pixels. Something around 9x9 pixels would probably be a good size. Note that you want your window size to be odd in both dimensions so that you have a symmetric sampling in both directions.
Using the location of the cursor, call getImageData() on the canvas. Your function call would look something like this: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size) so that you get a sample window of pixels with the center right over the cursor. From there, you could do a simple check to see if any non-white pixels are within the window, or you could be more strict and require a certain number of non-white pixels to declare the user on the path.
The key to making this work well, I think, is making sure the user doesn't receive negative feedback when they deviate the tiniest bit from the path (unless that's what you want). At that point you run the risk of making the user annoyed and frustrated.
Ultimately it comes down to one of two approaches. Either you load the actual vector path for the application to compare the user's cursor to (ie. do point-in-path checks), or you sample pixel data from the image. If you don't require the perfect accuracy of point-in-path checking, I think pixel sampling should work fine.
Edit: I just re-read your question and realized that, based on your reference to getPixel(), you might be using WebGL for this. The approach for WebGL would be the same, except you would of course be using different functions. I don't think you need to require WebGL, however, as a 2D context should give you enough flexibility (unless the app is more involved than it seems).