Create Noise Background With JavaScript And Canvas - CSS Script

• jQuery
• Vanilla JS
• CSS/CSS3
• Next.js / Shadcn
• AI Coding Tools NEW

AuthorIbeVanmeenenLast UpdateJuly 17, 2017LicenseMITTags backgroundViews5,237 viewsOfficialGo to websiteLive DemoDownload

An animated noise background for your webpage, built using JavaScript and HTML5 canvas.

How to use it:

Create an HTML5 canvas element on the webpage.

<canvas id="noise" class="noise"></canvas>

Make the canvas element fullscreen.

.noise { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: .05; }

The core JavaScript to generate the animated noise effect on the canvas element.

const noise = () => { let canvas, ctx; let wWidth, wHeight; let noiseData = []; let frame = 0; let loopTimeout; // Create Noise const createNoise = () => { const idata = ctx.createImageData(wWidth, wHeight); const buffer32 = new Uint32Array(idata.data.buffer); const len = buffer32.length; for (let i = 0; i < len; i++) { if (Math.random() < 0.5) { buffer32[i] = 0xff000000; } } noiseData.push(idata); }; // Play Noise const paintNoise = () => { if (frame === 9) { frame = 0; } else { frame++; } ctx.putImageData(noiseData[frame], 0, 0); }; // Loop const loop = () => { paintNoise(frame); loopTimeout = window.setTimeout(() => { window.requestAnimationFrame(loop); }, (1000 / 25)); }; // Setup const setup = () => { wWidth = window.innerWidth; wHeight = window.innerHeight; canvas.width = wWidth; canvas.height = wHeight; for (let i = 0; i < 10; i++) { createNoise(); } loop(); }; // Reset let resizeThrottle; const reset = () => { window.addEventListener('resize', () => { window.clearTimeout(resizeThrottle); resizeThrottle = window.setTimeout(() => { window.clearTimeout(loopTimeout); setup(); }, 200); }, false); }; // Init const init = (() => { canvas = document.getElementById('noise'); ctx = canvas.getContext('2d'); setup(); })(); }; noise();

See Also:

• Animated ASCII Backgrounds for Web Apps – ASCIIGround.js
• Create A Background Particles System With JavaScript And Canvas – nodes.js
• Create a Single Gradient/Image Background across Multiple Elements – ShareShade
• Create Interactive Particle Backgrounds with Pure JavaScript – DotWave.js
• Interactive Star Field Background with JavaScript and Canvas
• Create Dynamic Abstract Web Backgrounds With color4bg.js
• Modern Geometric Shapes Generator With JavaScript and SVG
• Responsive Video Background Component With Image Fallback

You Might Be Interested In:

Post navigation ← 3 Layer Image After/Before Comparison Slider Minimal Notification Library In Vanilla JavaScript – notes.js →

One thought on “Create Noise Background With JavaScript And Canvas”

1. single animation, game make to whats need mine have? generally tutorial shall be.

   Reply ↓

Leave a ReplyCancel reply

Search for:

Latest

• Apple Aqua-Inspired Glassmorphism UI Component Library – Aqua2
• Create Contextual Right-Click Menus with Vanilla JavaScript
• Multi-Select Box With Tree Structured Data Dropdown List – Treeselect
• High-Performance WebGPU Charting Library for Large Datasets – ChartGPU
• 360º Product View In JavaScript – js-cloudimage-360-view
• Interactive And Customizable Data Table/Grid Web Component – Active Table
• Render Mermaid Diagrams to SVG or ASCII Art – beautiful-mermaid

Get Free Updates

Get Weekly Email on latest Web Dev & Web Design resources. No spam, we promise!

Featured

You Might Also Like

Alert autocomplete background bootstrap Bootstrap 5 calendar Carousel checkbox Confirm Dialog CSS framework dark mode Date Picker dialog dropdown dropdown menu form validation gallery lightbox Grid Layout hover effect Image Lightbox image zoom Lazy Load lightbox loading indicator Loading Spinner material design multiple select off-canvas menu one page scroll Parallax progress bar range slider Responsive Menu scroll Scroll Animation select side menu smooth scroll switch tabs Text Animation Toast Notification Tree View Typing Animation Web Component © 2013-2025 CSSScript.com, A jQuery Plugins Subsite. All rights reserved.