call to .play clears the canvas

[harleydk]

Hello Jeremy,

I've found that calls to .play clears the canvas I'm animating on. The yellow circle I draw to begin with is wiped out; is it possible to keep the shapes already drawn on the surface?

I'm doing this:

http://83.151.157.119/rekapi/htmlpage1.html

• the yellow circle drawn in the beginning disappears immediately following the call to .play :-(

I'm hugely impressed with your rekapi, the keyframe workflow is really appealing to me. Thanks for letting me stand on your shoulders!

Best,M

Morten

[jeremyckahn]

Hi Morten, I'm glad you're enjoying Rekapi! The thing to keep in mind is that <canvas> uses immediate-mode rendering, so you're only ever painting over the last thing that was rendered. As a convenience, Rekapi clears out the entire canvas for every frame, which should be useful for most cases. You can actually disable this, if you are using the Canvas extensions (which you are):

var kapi = new Kapi({
  'context': canvas
});

kapi.config.clearOnUpdate = false;

This is something I need to document better, so thank you for bringing it to my attention. However, I don't think this actually solves your problem. In your example you are only rendering the yellow circle once, when the animation is initialized. If you want the yellow circle to persist across frames, the easiest approach is to turn it into an actor (like the pink circle) and give it some keyframes. So, something like this:

var yellowActor = new Kapi.CanvasActor({
  // Draws a circle.
  'draw': function (context, state) {

    context.beginPath();
    context.arc(
      state.x,
      state.y,
      state.radius,
      0,
      Math.PI * 2,
      true);
    context.fillStyle = 'yellow';
    context.fill();
    context.closePath();
  }
});

kapi.addActor(yellowActor);

yellowActor
  .keyframe(0, {
    x: 100,
    y: 100
  })
  .copyProperties(1000, 0);

The idea is to give yellowActor state throughout the course of the animation, allowing it to persist. Let me know if this helps!