Stop canvas flicker on re-render

Question

I have written a jQuery plugin that will render four polygons onto a canvas and fill them with an image.

When you mouse over a polygon it is moved to a separate top layer and re-rendered so it expands and then contracts if you mouse out.

Is there any way to do this so that it doesn't flicker?

I've had a look a this question but don't quite understand what the accepted answer is doing (I know it draws the image on a seperate layer but I don't know how it checks if this has finished rendering before using it) or how to include it in my jsfiddle code

score 3 · Accepted Answer · answered May 23 '13 at 12:14

As it turns out it was because I was making a new image object everytime I made the drawing:

            var imageObj = new Image();
            imageObj.src = polyArray[4];
            imageObj.onload = function () {
                poly.setFillPatternImage(imageObj);
                stage.draw();
            }

I changed this so that these objects were created and cached into an array and then re-used. This enabled the re-rendering to run a lot faster and removed the flickering:

http://jsfiddle.net/peteng/KAkvX/10/

Stop canvas flicker on re-render

1 Answers1