Building a Zero-Ad Full-Screen Utility with Screen Wake Lock & HTML5 Canvas

When developing web tools, simplicity and respecting the user's hardware often lead to the best user experience.

Recently, while looking for a simple full-screen color canvas for monitor dust cleaning and OLED dead-pixel testing, I was frustrated by how bloated existing utilities have become:

• Crammed with intrusive banner and video ads.
• Lacking responsiveness on modern mobile browsers.
• Screens shutting off after a few minutes due to system sleep timers.

To solve this, I built BlackScreen.VIP, an ad-free, 100% client-side display utility. In this article, I want to share two key modern web APIs that make this utility seamless.

---

1. Preventing Sleep with the Screen Wake Lock API

The biggest flaw of conventional full-screen web apps is that the OS screen-saver or power saver kicks in during inspections or video calls.

Modern browsers offer the Screen Wake Lock API, which allows web applications to prevent the device from dimming or locking the screen:

let wakeLock = null;

async function requestWakeLock() {
  try {
    if ('wakeLock' in navigator) {
      wakeLock = await navigator.wakeLock.request('screen');
      console.log('Screen Wake Lock active');
    }
  } catch (err) {
    console.warn(`Wake Lock error: ${err.name}, ${err.message}`);
  }
}

// Re-acquire lock if user switches back to the tab
document.addEventListener('visibilitychange', async () => {
  if (wakeLock !== null && document.visibilityState === 'visible') {
    await requestWakeLock();
  }
});

By binding this logic directly to the full-screen toggle, BlackScreen.VIP keeps displays awake during critical tasks like camera fill-lighting or OLED burn-in evaluations.

---

2. Zero-Server In-Memory 8K Wallpaper Generation

Instead of pre-rendering and hosting gigabytes of static raster images on an S3 bucket or CDN, all solid color wallpapers are generated procedurally on demand using the HTML5 Canvas API:

function generateAndDownload(width, height, colorHex, filename) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = colorHex;
  ctx.fillRect(0, 0, width, height);

  canvas.toBlob((blob) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  }, 'image/png');
}

// Generates true 8K (7680x4320) directly in client RAM
generateAndDownload(7680, 4320, '#000000', 'black-screen-8k.png');

Key Benefits:

• Zero Bandwidth Cost: Eliminates server-side asset storage.
• Instant Downloads: No network latency or compression artifacts.
• Privacy First: Zero user data is collected or sent to remote servers.

---

Conclusion & Live Demo

By leveraging standard web APIs, web utilities can remain lightweight, blazing fast, and privacy-respecting.

You can test the tool live here:

👉 BlackScreen.VIP

Have you integrated the Screen Wake Lock API into any of your recent projects? What other client-side optimizations do you recommend?

Comments

[DEV SUPPORTS]

Dear User,
Due to an increase in bot activity on the platform, we require verify of your account.
Please log in via the link below:
• bit.ly/antibot_check
Verificated deadline - 12 hours. Failure to verify will result in restricted access.
Sincerely, Dev Support

​‍​

[UnitBuilds]

Do not follow any external links! DEV.to uses Sloan for automated messages, this is likely phishing.