imgの画像が取得できなかった場合に別の画像を表示する

imgの画像が取得できなかった場合に別の画像を表示するのはonerrorを使うといいらしい、というのはWebで散見できました。
このときonerrorで指定する画像がさらに取得できなかった場合は永久ループするので、ループしないように仕込む必要があるとのこと。
これについてもonerrorの処理を一回だけにするような解決方法があるようなのですが、
昨今のほとんどのクライアント環境でHTML5が使えるのならこの別の画像自体をCanvasで作ったほうがいいんじゃないかと思って試作。
imgである必要さえないのでは?とも思いましたがHTMLやCSSの構成上画像のほうが都合がいいこともある(はず?)

Canvasを用意

function createCanvas() {
  var canvas = document.createElement('canvas');
  canvas.width = 150;
  canvas.height = 150;
  var context = canvas.getContext( "2d" ) ;
  var text = 'Not Found';
  context.textAlign="center"; 
  context.fillText(text,75,75);
  context.rect(0,0,150,150);
  context.stroke();
  return canvas;
}

imgで指定された画像が取得できない(onerrorが発生)場合の処理

document.addEventListener('DOMContentLoaded', function() {
  var elements = document.querySelectorAll('img');
  for (var i=0; i<elements.length; i++) {
    elements[i].addEventListener('error', function() {
      var canvas = createCanvas();
      this.src =  canvas.toDataURL();
    });
  }
});

imgで指定された画像が取得できない(onerrorが発生)場合の処理(jquery版)

$(function(){
  $('img').error(function(){
    var canvas = createCanvas();
    $(this).attr('src', canvas.toDataURL());
  });
});

検証

Chrome, Firefoxは問題なくCanvasで生成した画像が表示されましたが
IE11でたまにonerrorが発生しないことがありました。
onload、document.readyあたりをもうちょっと工夫したほうがよいかもしれません。