background-image использует URL аддрес, и не возможно использовать там Canvas элемент.

Для IMG нужно использовать свойство onload (и по возможности onerror).
Для Canvas не нужно использовать ни onload, ни onerror (тем более что их нету).

http://www.w3.org/TR/2dcontext/#images
Прошу почитать!
Там вы увидите:

Нам интересен другой секрет.

Фотошоп не умеет сохранять JNG.

Первое правило темы об APNG: не говорить об APNG :D

А причём здесь JNG?

JNG тоже здесь причем!
Я создал:
crossImage - создает элемент с APNG/JNG или других изображений как Canvas элемент.

Пример:

//JNG
var img = new CrossImage("image.jng",function(){
ctx.drawImage(img,0,0);
});
//APNG/PNG
var img2 = new CrossImage("image.png",function(){
ctx2.drawImage(img2,0,0);
});
//JPEG
var img3 = new CrossImage("image.jpg",function(){
ctx3.drawImage(img3,0,0);
});

JNG = JPEG Network Graphics
http://en.wikipedia.org/wiki/JNG

APNG = Animated PNG
http://en.wikipedia.org/wiki/APNG
(чтобы анимация работала, если вы используете crossimage, следует использовать setInverval)

Для CrossImage доступны следующие форматы:
APNG
PNG (статичный)
GIF (не анимированный)
JNG
JPG
И прочие поддерживаемые.

Прекрасно. И кому нужны эти форматы, если даже фотошоп их не поддерживает?