Meilleur flou de mouvement de la toile

On l'a déjà demandé , mais la solution acceptée ne fonctionne pas pour moi (littéralement, rien ne me brouille dans la démonstration liée), et c'est un peu un kludge impliquant deux éléments de toile.

J'utilise actuellement la technique de flou de mouvement du "pauvre homme", qui implique essentiellement de filer l'image source sur la toile encore et toujours et de laisser tomber un rectangle semi-transparent de la même couleur que l'arrière-plan après chaque itération.

Voici une démo: http://jsfiddle.net/YmABP/

Comme vous pouvez le voir, cela fonctionne bien pour les bords de l'image, mais les parties intérieures de l'image ne finissent pas en flou, et cela semble terrible avec des images qui ont une transparence partielle.

• Convertir un canevas ou des points de contrôle en SVG
• Javascript getImageData pour la toile html5
• Taille de police de lien HTML5 basée sur la taille de la toile
• Utilisation des bibliothèques de traitement dans processing.js
• Comment faire pour que le texte ne sélectionne pas le canevas HTML5 en double-clic?

Existe-t-il une meilleure technique pour le flou de mouvement? Idéalement, j'aimerais pouvoir faire quelque chose comme context.drawImage et passer un paramètre d'opacité, mais AFAIK, rien de tel n'existe. Certaines images peuvent être hébergées sur des domaines tiers, donc je n'aurai pas accès aux données individuelles des pixels. Si cela se résume à cela, nous pouvons tirer les images sur notre serveur, puis je pourrais itérer sur chaque pixel et le dessiner comme un rectangle minuscule semi-transparent, mais cela semble être trop élevé.

Est-ce que quelqu'un connais une meilleure solution de flou de mouvement, de préférence celle que je peux utiliser avec des images éloignées?

Je doute que cela compte, mais pour mes besoins actuels, les choses ne se déplacent que vers le haut.

• Couleurs aléatoires pour les cercles dans le graphique d3.js
• Rotation autour d'un point arbitraire: Toile HTML5
• Conversion d'URI de données en données d'image
• Comment vérifier si une toile est vide?
• Calculer la vitesse par distance et frottement

 var img = new Image, ctx = document.querySelector('canvas').getContext('2d'); ctx.globalAlpha = 0.1; img.onload=function(){ for (var y=0;y<10;++y) ctx.drawImage(img,0,y); } img.src = 'http://phrogz.net/tmp/gkhead-small.png';​