CODEWITHSUNDEEP
javascripthtmlanimationcanvas
Sam
Sam

Reputation: 23

Canvas layers and game animation

I am wondering how to go about this? draw, wait 1 second draw frame2 wait 1 second draw frame3 wait 1 second. clear animation canvas

now I assume you have to do this on a overlapping canvas so that it wont be wiped by my current game refresh at 60 fps.

I will also be having the animation frames be a transparent png so you can see whats behind it also. think smoke animation.

What is the best way to wait 1 second, use set interval or set Timeout? I already use set animframerate on my main canvas layer

I need to know how to animate while other animation is going on, as my head tells me that painting to screen is procedural so if a method is getting called to animate something everything else stops while its getting animated.

Upvotes: 0

Views: 515

Answers (1)

IceCreamYou
IceCreamYou

Reputation: 1882

Drawing onto a separate canvas is a good way to have multiple layers, but there are several ways to do what you would like:

  1. If your PNG image is pre-defined, you can just render it directly onto the canvas with context.drawImage(). The transparency will be preserved. As long as your image is loaded onto the page before it is rendered, there will be little overhead in re-rendering it every frame.
  2. You can draw to a hidden canvas and then draw that canvas onto your main canvas. You can do this by creating a canvas in JavaScript and never writing it to the page. For example: var layer = document.createElement('canvas'); and then call context.drawImage() with layer as the image parameter. I have written an implementation of a Layer class you can use to make this easier.
  3. You can draw directly onto your main canvas using transparency by setting the globalAlpha property of your graphics context object. (Just remember to set it back to 1 after you're done drawing your transparent stuff.)
  4. You can draw onto a secondary, visible canvas that is absolutely positioned over your primary canvas. To do this you need to set the CSS background-color of the secondary canvas to transparent.

Similarly, there are two good ways to wait one second:

  1. Use setTimeout or setInterval. This will wait as close to your delay period as possible (in this case one second) and then execute the callback asynchronously. Use setTimeout if you want to execute something once and setInterval if you want to execute something at a predefined interval indefinitely (i.e. every second).

  2. Keep a variable that holds the last time you executed the function you want to run, and check whether you've waited long enough before running the code again. This will run the code synchronously. For example:

    // Outside of your animation loop
var lastRun = Date.now();
// Inside your animation loop
if (lastRun + 1000 < Date.now()) {
    /* Run you callback code */
}

    Since you are using requestAnimationFrame to run your main animation loop, this will run at the soonest time after your delay (e.g. 1 second) at which the browser is ready to paint a new frame. Note that if you want code using this method to run asynchronously, you can also use web workers.

Unless you're drawing text onto a canvas without caching it or drawing thousands of objects onto your canvas, chances are pretty good that your performance is not draw-bound, so I would opt for the simplest solution even if it's not asynchronous. You can use the stats.js library to test your canvas performance.

Upvotes: 1

Related Questions