text animation issue in both FF and Chromium-derived

[dksmiffs]

The following "raindrops with breadcrumbs" animation works on Chromium-derived 21.0 with jCanvas b47e419cf9f379f1df8c82617ebc8d5835fdc7de, but not on later versions. This code won't show any animation at all with FF 15.0.1 with any version of jCanvas that I've tried:

function addBreadcrumbCount(ii, xx, yy, opacityValue) {
  $("canvas")
    .addLayer({name: "crumb-count-" + ii,
               method: "drawText", fillStyle: "red", strokeStyle: "red",
               x: xx, y: yy, font: "16pt Verdana",
               fromCenter: false, text: ii+1, opacity: opacityValue});
}
function fadeLayer(name, opacity, speed /* , afterFn */ ) {
  if (3 == arguments.length) {
    $("canvas").animateLayer(name, {opacity: opacity}, speed);
  } else if (4 == arguments.length) {
    $("canvas").animateLayer(name, {opacity: opacity}, speed, arguments[3]);
  }
}
function raindrop(ii, width, height) {
  if (ii<10) {
    xx = Math.random() * width;
    yy = Math.random() * height;
    $("canvas")
      .addLayer({name: "ring-" + ii,
                 method: "drawArc", strokeStyle: "blue",
                 strokeWidth: 2, x: xx, y: yy, radius: 10, opacity: 0});
      addBreadcrumbCount(ii, xx, yy, 0);
      fadeLayer("ring-"+ii, 1, 0);
      $("canvas")
        .animateLayer("ring-" + ii, {radius: 30, opacity: 0}, 500,
          function () {
            fadeLayer("crumb-count-"+ii, 1, 0,
                      raindrop(++ii, width, height)
                     );
          }
        );
  }
}
$(document).ready(function(){
  var height = 1000;
  var width  = 1000;
  raindrop(0, width, height);
});

If I comment out the "addBreadcrumbCount" call and replace the 'fadeLayer("crumb-count...' call with simply making the recursive call to "raindrop" (effectively taking the text animations out of the equation), then the "raindrops" animate on both Chromium-derived 21.0 and FF 15.0.1 using the latest jCanvas 0b8a951f507591738b458e1d813d0b680f07eef7.

[caleb531]

I would recommend you wrap convert your text value to a string on line 6 of your code:

text: String(ii+1)

Doing so fixed an error on Google Chrome, but still doesn't show anything on Chrome or Firefox. Could you please send me a screenshot of the expected result, so I know what I'm supposed to be looking for?

[dksmiffs]

The animation shows a sequence of random individual "raindrops", and then leaves a "breadcrumb" count behind to show where past raindrops occurred.

Your recommended fix worked for me on both Chromium 21.0-derived and FF 15.0.1, so I'm closing the issue.