October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk9 min

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

A canvas can draw the interface, the Fullscreen API can fill the display with it, and the Screen Wake Lock API can ask the screen to stay on. These are three separate requests, each can be refused, and none guarantees the others.

“

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Yes. A browser utility can draw its interface on an HTML5 canvas, enter fullscreen, and ask the screen to stay awake while the user is working in it. These are three separate browser capabilities. A fullscreen request does not keep the display on, and a wake lock does not make the page fullscreen. Each request is asynchronous and can be refused, so the interface has to report what actually happened rather than what was requested.

”

“

Three separate jobs, three separate APIs

The fastest way to avoid a broken design is to assign each job to the API that owns it. Canvas paints pixels. The Fullscreen API changes which element occupies the display. The Screen Wake Lock API asks the platform not to turn the screen off. Each one has its own prerequisites and failure modes.

As an Amazon Associate I earn from qualifying purchases.

Capability What it does What it does not do Main requirements
HTML5 Canvas (<canvas>) Provides a bitmap drawing surface through the canvas drawing-context interfaces Does not provide fullscreen or keep-awake behaviour No special permission; defined in the WHATWG HTML Standard: Canvas
Fullscreen API Asks the browser to show a chosen element across the whole display Does not keep the screen awake; can end without the page’s involvement Called from a transient user activation (typically a click or key press); governed by Permissions Policy; the request returns a promise and can be rejected
Screen Wake Lock API Asks the platform to prevent the screen from turning off Does not change the page’s layout or display mode; not guaranteed or permanent Secure context only; visible document only; governed by Permissions Policy; the request can be denied

The W3C specification defines the wake lock as a request that the platform may limit or deny, and the W3C Screen Wake Lock specification is the normative source for those limits. The MDN requestFullscreen() reference and the MDN Fullscreen API guide cover the fullscreen side.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Build the page so each piece can fail on its own

Structure the page so the canvas is one part of the interface, not the whole of it. Controls should be real buttons, and instructions should be real text, so that a failed fullscreen request or a denied wake lock still leaves a usable page.

#1 Best Overall
Amazon Basics Small Digital Oval Alarm Clock with LED Display, Nightlight, Snooze Function & Battery Backup, Black, 4.5 x 3.5 x 2.4 Inches
  • Digital alarm clock with a 0.7-inch green LED display for easily checking the time at a glance
  • Built-in nightlight gently illuminates a dark room
  • Repeating snooze function makes it possible to sleep a little longer
  • AC powered with integrated power supply. Batteries may be used as a backup power source to ensure time and alarms are retained in memory for 8 hours (refer to User Manual for details)
  • Measures 4.5 x 3.5 x 2.4 inches (LxWxH); weighs 0.4 pounds (6.6 oz) Note: Batteries are not included
<main id="app">n  <canvas id="stage" aria-label="Utility display"></canvas>n  <button id="fs" type="button" aria-pressed="false">Fullscreen</button>n  <button id="wake" type="button" aria-pressed="false">Keep screen awake</button>n  <p id="status" role="status"></p>n</main>

Size the canvas to the viewport

A canvas keeps its bitmap size until you change it, so a fullscreen utility needs a resize handler that matches the bitmap to the viewport. Fullscreen changes the viewport, so run the same handler on every change and check the result in each browser you support.

const canvas = document.getElementById("stage");nconst ctx = canvas.getContext("2d");nnfunction fitCanvas() {n  const dpr = window.devicePixelRatio || 1;n  canvas.width = Math.round(window.innerWidth * dpr);n  canvas.height = Math.round(window.innerHeight * dpr);n  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);n}nwindow.addEventListener("resize", fitCanvas);nfitCanvas();nnfunction frame() {n  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);n  // draw the utility heren  requestAnimationFrame(frame);n}nrequestAnimationFrame(frame);

Setting canvas.width resets the transform, which is why setTransform comes after the size assignment.

Rank #2
Sale
Netzu 3-in-1 Digital Clocks for Living Room, Small & Compact Alarm Clock
  • Small & Compact Plug-in Alarm Clock for Every Room: Perfect for modern homes ditching cable boxes—place it under your living room TV to replace the lost clock display, or use it as a sleek bedside alarm in the bedroom. Also ideal for home offices, gyms, or dorm desks.
  • 3-in-1 Multispace Display: Stay organized with a bright, easy-to-read display showing time, date, and indoor temperature—no more switching apps or devices.Its compact design fits seamlessly into any space, keeping you on schedule whether you’re streaming, working, or sweating.
  • Adjustable Brightness for Day & Night: Adjust screen brightness in 4 levels+OFF with a single touch of the top-mounted button—no confusing menus. Keep it dim for a distraction-free bedroom at night or boost it for clear visibility in bright gyms or sunlit home offices.
  • Plug-in Power Clock: This alarm runs on AC power (cable included), ensuring it’s always on and accurate.
  • Sleek, User-Friendly Design:Designed with simplicity in mind: a single top button controls brightness, while the clean, modern look complements any decor—from minimalist living rooms to industrial-style home gyms. Its intuitive interface works for all ages.

Request fullscreen from a user gesture

Fullscreen is the step most likely to fail silently if it is built carelessly. Use this sequence:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
  1. Attach the request to a button or key handler. The MDN requestFullscreen() reference describes transient user activation as the requirement, so a request triggered by a timer or page load is not a valid gesture.
  2. Call app.requestFullscreen() on the element that should fill the display, such as the application container. Make the call before any slow await in the handler, because the activation is transient and can expire.
  3. Catch the promise rejection and tell the user that fullscreen was unavailable. Leave the ordinary page in place.
  4. Listen for fullscreenchange on document and update the button from document.fullscreenElement, not from the last click. Fullscreen can end when the user presses Esc or F11, or when the user switches tabs or applications.
const app = document.getElementById("app");nconst fsButton = document.getElementById("fs");nconst statusEl = document.getElementById("status");nnfsButton.addEventListener("click", async () => {n  try {n    if (document.fullscreenElement === app) {n      await document.exitFullscreen();n    } else {n      await app.requestFullscreen();n    }n  } catch (err) {n    statusEl.textContent = "Fullscreen was not available: " + err.message;n  }n});nndocument.addEventListener("fullscreenchange", () => {n  const on = document.fullscreenElement === app;n  fsButton.setAttribute("aria-pressed", String(on));n  fsButton.textContent = on ? "Exit fullscreen" : "Fullscreen";n});

Tell users how to leave fullscreen in the interface itself. The MDN Fullscreen guide recommends making the Esc and F11 exits clear, because a fullscreen page with no visible exit is a trap.

Rank #3
Netzu Digital Alarm Clocks for Bedrooms, Loud Alarm Clock with Dual Alarms, Bold Digits, 5 Dimmers, 4 Volumes, Snooze, Bedside Clock for Deep Sleepers Kids Teens Seniors, Plug in Clock, Easy to Set
  • PLUG IN ALARM CLOCK WITH BATTERY MEMORY: This plug in alarm clock powered by USB only — all functions, including the display, require a wired power connection. You can also insert three AAA batteries (not included) as a battery backup to save all your time & alarm settings and ensure alarms still ring when power fails, but they CANNOT light up the screen or power the clock for regular daily use.
  • BEDROOM CLOCK WITH DIMABLE LED DISPLAY: The compact digital clock (6.2" x 3" x 2.8") has a 48mm blue bold font for easy time viewing from a distance. You can easily toggle between 5 brightness levels, from very bright to completely dim. It also offers 12 or 24-hour time formats to meet different time reading habits.
  • DUAL ALARM CLOCK WITH SNOOZE FUNCTION: Our bedside alarm clock supports setting two separate wake up times, convenient for family members with different schedules. There is an easily accessible snooze button on the top, enabling you to easily activate an additional 9 minutes of snooze even in a half-awake state.
  • LOUD ALARM CLOCK WITH 4 VOLUME LEVELS: Our loud alarm clock offers four levels of volume. With one click you can switch to the volume that suits you best, effectively waking you up and starting your day with a fresh start!
  • EASY-TO-USE ALARM CLOCK FOR GIFT GIVING: With clearly labeled buttons for easy operation, this table clock pleases as both functional bedside timekeeper and a considerate present. Ideal for personal use or as a considerate gift for children, seniors, teenagers, or loved ones.

Request a screen wake lock while the page is visible

The wake lock needs its own lifecycle. The request returns a WakeLockSentinel, the sentinel can be released by the page or by the browser, and the browser releases it when the page is no longer visible. The MDN Screen Wake Lock API guide describes this pattern, including the release event and reacquisition after visibility returns.

  1. Feature-detect with "wakeLock" in navigator before showing the control as usable. If the check fails, say so in the interface.
  2. Start the request from a control the user operates, so the user knows which activity is holding the screen.
  3. Confirm that the document is visible. A request made while the page is hidden is refused under the W3C specification, which limits acquisition to visible documents.
  4. Keep the sentinel, listen for its release event, and update the status when it fires.
  5. Release the lock when the user turns the feature off or ends the activity.
let lock = null;nlet wantAwake = false;nconst wakeButton = document.getElementById("wake");nnasync function acquireLock() {n  if (!("wakeLock" in navigator)) {n    statusEl.textContent = "Keeping the screen awake is not supported in this browser.";n    return;n  }n  if (document.visibilityState !== "visible") return;n  try {n    lock = await navigator.wakeLock.request("screen");n    lock.addEventListener("release", () => {n      lock = null;n      statusEl.textContent = wantAwaken        ? "The browser released the screen lock. It will be requested again when this page is visible."n        : "The screen can turn off normally.";n    });n    statusEl.textContent = "The browser has granted a screen wake lock. The system may still release it.";n  } catch (err) {n    statusEl.textContent = "The browser declined the screen wake lock: " + err.message;n  }n}nnasync function setAwake(on) {n  wantAwake = on;n  wakeButton.setAttribute("aria-pressed", String(on));n  if (on) {n    await acquireLock();n  } else if (lock) {n    await lock.release();n    lock = null;n  }n}nnwakeButton.addEventListener("click", () => setAwake(!wantAwake));nndocument.addEventListener("visibilitychange", () => {n  if (document.visibilityState === "visible" && wantAwake && !lock) {n    acquireLock();n  }n});

The wantAwake flag is what separates a user’s preference from the browser’s current grant. When the browser releases the lock during a tab switch, the preference stays on and the lock is requested again on return. When the user turns the feature off, the preference clears and the lock is released.

Rank #4
Topski Loud Alarm Clocks for Bedrooms Heavy Sleepers, Digital Bedside Clock
  • 【RGB Plug-in Alarm Clocks for Bedrooms】- Add a touch of magic to your bedroom with our clock's unique RGB color changing display. Easily toggle through different digit colors to suit your mood or preference. Say goodbye to boring, monochrome clocks and elevate your room decor with our colorful and eye-catching option.
  • 【Alarm Clock with Vibrant RGB Night Light】- Create a beautiful and calming ambiance in your sleeping space with the vibrant RGB night light. With 9 color light effects, you can easily adjust the colors to your preferred sequence. Whether you want a gentle night light or a colorful addition to your room, our clock has got you covered.
  • 【Large Numbers Desk Clock】- Our clock features a 7-inch LED display with large, clear numbers. The 2.36-inch height of the numbers ensures they can easily be read from a distance. This makes it perfect for those with sight issues, allowing them to easily tell the time without any difficulty.
  • 【Outlet Powered Alarm Clocks】- Our digital alarm clock is powered by an outlet. The battery is solely used to preserve your time settings in the event of a power outage and does not enable the alarm clock to function normally. Tip:The battery backup function requires 2 AAA batteries, which are not included with the product.
  • 【Adjustable Brightness Bedroom Clock】- Customize the brightness of your clock to meet your needs. The night light can be easily tapped on and off, and it can be dimmed to your desired level or turned off completely. The numbers on the clock can also be dimmed or turned off for those who prefer complete darkness while sleeping.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Keep the interface’s state truthful

Track fullscreen and wake lock as two separate states, because a user can have either one without the other. The table below lists the combinations a utility should display accurately.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Fullscreen Wake lock What the interface should say
On Granted Both are active; the screen is expected to stay on while the page is visible
On Declined or released The page fills the display, but the screen may turn off; show the reason if it is known
Off Granted The page is in a normal window and the screen is held on; say that the lock is active
Off Off Ordinary page; no special state
Any Released after page hidden The lock is paused and will be requested again when the page is visible, if the user still wants it

Avoid labels such as “always on” or “keep awake forever”. Neither the specification nor MDN describes a lock as permanent, and the status text should match what the browser has actually granted.

Best Value
Sale
DreamSky Wooden Digital Alarm Clock for Bedroom with Large Numbers
  • Easy To Use Wooden Digital Alarm Clock with Large Numbers: This modern electric alarm clock is designed with big bold 1.8 inches numbers that can be easily seen across the room, and simple to set, making it an ideal small digital clock for kids, teenagers, adults, seniors and the elderly. (Notice: The display only lit when plugged in)
  • 6 Dimmable Brightness Level: DreamSky wooden bedside clock can be easily set with adjustable dimmer for different situation of using, dark enough for sleep and bright enough to watch in the day.
  • 5 Adjustable Volume Level and Snooze Feature: Featuring an alarm volume of up to 105dB, this loud alarm clock is perfect for heavy sleepers and also accommodate light sleepers with an adjustable volume range from 70 to 105dB. And with the snooze function, you can earn a 9 minutes extra rest.
  • Plug In Clock (Not Battery Powered): The DreamSky nightstand table clock is powered by the included adapter, which can provide a stable time display, making a handy wood clock for living room, bedroom, office, kids room etc.
  • Alarm and Setting Backup: The battery backup feature of this wooden alarm clocks for bedrooms will keep the alarm work during the power outage, no worry for oversleeping. Meanwhile it can save the time setting, which can save the trouble of reset the clock. (Notice: Battery only operates alarm, not time display. The batteries are not included)

Browser, device and embedding limits

  • Secure context required. The Screen Wake Lock API is marked as a secure-context feature in MDN, so test it on an HTTPS origin or localhost.
  • Visible documents only. The W3C specification limits acquisition to visible documents, and the browser releases the lock when the page is hidden.
  • Refusals are normal. The browser or operating system can refuse a request for implementation-specific, user, or platform reasons. Low battery or a power-saving mode can also affect availability.
  • Transient activation for fullscreen. Fullscreen requests need a user gesture and can be rejected. Pages can also end fullscreen without any action from the app.
  • Mobile viewport effects. The MDN Fullscreen guide notes that on some mobile browsers, fullscreen can affect viewport scaling and pinch-to-zoom. Test the canvas layout and any zoom-dependent controls on the devices you target.
  • Embedded documents. Both APIs are governed by Permissions Policy. The W3C specification’s default allowlist for screen wake lock is self, so a cross-origin iframe must be granted the feature explicitly, for example <iframe src="https://example.com/utility" allow="fullscreen; screen-wake-lock"></iframe>.
  • No universal support matrix here. The reviewed standards and MDN pages describe general API behaviour. Check the MDN compatibility data for each API before relying on a specific browser or version.

Power use and user control

The W3C specification explains that the platform can limit wake locks based on power conditions or power-saving mode, which is one reason a utility should never assume the lock will hold. From a design standpoint, the important choices are these:

  • Show the active state while the lock is held, and offer a stop control in the same place.
  • Hold the lock only while the user is actively using the utility. MDN’s examples, such as reading an ebook, following a map, or presenting, are all tasks with a clear end.
  • Release the lock when the activity ends, and do not keep it through an idle period the user never asked for.
  • Consider whether the lock should resume after a tab switch. Reacquiring preserves continuity for a user who wants the screen held on; stopping on return reduces unexpected power use. If you reacquire, make the preference visible and honour the release events.

What “zero-ad” can and cannot promise

“Zero-ad” describes the product’s design, not a property of the standards. The Canvas, Fullscreen, and Screen Wake Lock specifications say nothing about advertising, tracking, or network requests, and they cannot certify that a particular build is free of them. A utility is ad-free only if its code, markup, and third-party scripts are.

To make the claim checkable, keep the script list short and inspect it. In the browser’s developer tools, open the Network panel, reload the page, and confirm which requests the page makes. Remove any ad-network script, analytics tag, or embedded widget that is not needed. Describe the result in terms of what the page loads, not as a general promise about the browser or the APIs.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Troubleshooting

Symptom Likely cause What to check
Fullscreen rejects with an error The request was not made within a user gesture, or it followed a slow await that let the activation expire Move requestFullscreen() to the top of the click handler and check that the page is not inside an iframe without the fullscreen permission
Fullscreen works, but the canvas does not fill the display The bitmap was not resized after the viewport changed Confirm that the resize handler runs on fullscreen changes and that the CSS sets the canvas to the viewport size
Wake lock request fails immediately The page is hidden, the origin is not a secure context, or Permissions Policy blocks the feature Log document.visibilityState, the page protocol, and the iframe allow attribute
Screen turns off although the status says the lock is granted The system or power settings override the lock Check the device’s power-saving settings and the status text; the platform may limit the lock independently of the page
Lock works on desktop but not on a phone Support and behaviour differ by browser and platform Check the MDN compatibility data for the target browser and test on a real device

”

The Bottom Line

“”

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.