javascript - Is it possible to set a canvas as foreground? -

मेरे पास इस तरह एक सरल HTML पृष्ठ है:

  & lt; html & gt; & Lt; शीर्ष & gt; & Lt; title & gt; & lt; / title & gt; & Lt; link rel = "icon" प्रकार = "image / vnd.microsoft.icon" href = "images / icon.png" / & gt; & lt; link rel = "stylesheet" प्रकार = "text / css" href = "style.css" / & gt; & Lt; / head & gt; & Lt; body bgcolor = "ffffff" & gt; & lt; br & gt; & lt; img src = "चित्र / 1.png" शैली = "स्थिति: सापेक्ष; बाएं: 4%; चौड़ाई: 85%" & gt; & lt; / img & gt; & Lt; मेटा http-equiv = "ताज़ा करें" सामग्री = "7; होम_ html" / & gt; & Lt; / body & gt; & Lt; / html & gt;   
 जो एक छवि प्रदर्शित करता है और 7 सेकंड के बाद होम पेज पर रीडायरेक्ट करता है। मुझे कैनवास का उपयोग करने वाला एक शांत कॉन्फ़ेटी कोड मिला है और मैं इसे अग्रभूमि में इस पृष्ठ पर जोड़ना चाहता हूं, लेकिन हमेशा छवि या टेक्स्ट को देखने में सक्षम होता हूं, जो मैं भविष्य में पृष्ठ पर जोड़ सकता हूं, लेकिन मुझे नहीं मिल सकता है ऐसा करने का एक तरीका कंफ़ेद्दी कोड यह है:  
  (फ़ंक्शन () {var रंग, कॉन्फेटी, NUM_CONFETTI, PI_2, कैनवास, कंफ़ेद्दी, संदर्भ, ड्रॉकर्कल, आई, श्रेणी, आकार बदलनेवाले, एक्सपो; NUM_CONFETTI = 350; COLORS = [[85, 71, 106], [174, 61, 99], [21 9, 56, 83], [244, 92, 68], [248, 182, 70]]; पीआई -2 = 2 * मठ PI; कैनवास = दस्तावेज़.getElementById ("world"); संदर्भ = कैनवास.गेटकॉन्टेक्स्ट ("2 डी"); खिड़की। वी = 0; विंडो एच = 0; resizeWindow = function () {window.w = canvas.width = window.innerWidth; return window.h = canvas.height = window.innerHeight;}; window.addEventListener ('resize', resizeWindow, झूठी); window.onload = function () {return setTimeout (resizeWindow, 0);}; श्रेणी = समारोह (ए, बी) {रिटर्न (बी - ए) * मथ.रेन्डम () + ए;}; ड्राक्रैक = फंक्शन (एक्स, वाई, आर, स्टाइल) {context.beginPath (); context.arc (x , Y, r, 0, PI_2, झूठी); संदर्भ.फिलस्टाइल = शैली; वापसी संदर्भ.फिल ();}; xpos = 0.5; दस्तावेज .onmousemove = function (e) {return xpos = e.pageX / w;} ; window.request एनीमेशनफ़्रेम = (फ़ंक्शन () {वापसी Window.request एनीमेशनफ़्रेम || Window.webkitRequestAnimationFrame || Window.mozRequestAnimationFrame || Window.oRequestAnimationFrame || Window.msRequestAnimationFrame || फ़ंक्शन (कॉलबैक) {वापसी विंडो.सेट टाइमआउट (कॉलबैक, 1000/60); }; }) (); कंफ़ेद्टी = (फ़ंक्शन () {फ़ंक्शन कंफ़ेद्दी () {this.style = COLORS [~~ श्रेणी (0, 5)]; this.rgb = "आरजीबीए (" + this.style [0] + "," + यह शैली [1] + "," + this.style [2]; this.r = ~~ श्रेणी (2, 6); this.r2 = 2 * this.r; this.replace ();} कॉन्फ़ेटी.प्रोटोटाइप प्रतिस्थापन = समारोह () {this.opacity = 0; this.dop = 0.03 * श्रेणी (1, 4); this.x = श्रेणी (-this.r2, w - this.r2); this.y = श्रेणी (- 20, एच - यह.आर 2); this.xmax = w - this.r; this.ymax = h - this.r; this.vx = श्रेणी (0, 2) + 8 * xpos - 5; इसे वापस। = 0.7 * this.r + श्रेणी (-1, 1);}; कंफ़ेद्दी.प्रॉपिटिपएड्रॉ = फ़ंक्शन () {var _ref; this.x + = this.vx; this.y + = this.vy; यह अस्पष्टता + = this.dop; यदि (this.opacity & gt; 1) {this.opacity = 1; this.dop * = -1;} अगर (यह.पैसाती & lt; 0 || this.y & gt; this.ymax ) {This.replace ();} यदि (! ((0 & lt; (_ref = this.x) & amp; amp; _ref & lt; this.xmax))} {this.x = (this.x + this.xmax )% This.xmax;} वापसी ड्रा चार्ज (~~ this.x, ~~ this.y, this.r, "" + this.rgb + "," + this.opacity + ")");}; वापसी कंफ़ेद्दी ;}) (); कॉन्फेटी = (समारोह () {var _i, _results; _results = []; के लिए (i = _i = 1; 1 & lt; = NUM_CONFETTI? _i & lt; = NUM_CONFETTI: _i & gt; = NUM_CONFETTI; i = 1 & lt; = NUM_CONFETTI ? ++ _ i: --_ i) {_results.push (नया कॉन्फ़ेट्टी);} रिटर्न _परेट;}) (); window.step = function () {var सी, _i, _len, _results; requestAnimationFrame (कदम); Context.clearRect (0, 0, डब्ल्यू, एच); _results = []; (_i = 0, _len = confetti.length; _i और lt; _len; _i ++) के लिए {c = कंफ़ेद्दी [_i]; _results.push (c.draw ()); } वापसी _results; }; कदम (); ।}) कॉल (this);   
 अग्रभूमि में कंफ़ेद्दी एनीमेशन कैसे किया जाता है पर पृष्ठ को पूरी तरह कार्यात्मक रखने के बारे में कोई सुझाव या विचार?   
 
 
 हां यह संभव है ...  
  
 सीएसएस  
  पॉइंटर-इवेंट्स: कोई भी