HTML में कैनवास को एनिमेट करके शोर को अनंत रूप से एनिमेट करना

putImageData() मेथड इमेज डेटा को कैनवास पर रखता है। कैनवास को एनिमेट करने के लिए, हम मेन लूप के बाहर एक पुन: प्रयोज्य ImageData ऑब्जेक्ट बनाते हैं:

var ct = c.getContext("2d", {alpha: false}); // अल्फा चैनल के बिना कॉन्टेक्स्ट
var a = ct.createImageData(c.width, c.height);
var buffer = new Uint32Array(a.data.buffer);

function loop() {
  noise(ct);
  requestAnimationFrame(loop);
})();

function noise(ct) {
  var l = buffer.length - 1;
  while(l--) buffer[l] = Math.random() < 0.5 ? 0 : -1 >>> 0;
  ct.putImageData(a, 0, 0);
}

यह कोड रैंडम शोर पैटर्न उत्पन्न करता है जो लगातार अपडेट होता है, जिससे मूवमेंट का भ्रम पैदा होता है।