coppersalts HTML5b level editor darkmode

2/7/2026, 3:03:36 PM
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        coppersalts HTML5b level editor darkmode
// @version     1
// @run-at      document-start
// @author      rssaromeo
// @match       *://coppersalts.github.io/HTML5b/*
// @match       *://127.0.0.1:8086/*HTML5b/index.html*
// @exclude     *://challenges.cloudflare.com/*
// @grant       none
// @license     GPLv3
// @icon        data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiPjxwYXRoIGZpbGw9IiNEODFDMTIiIHN0cm9rZT0ibm9uZSIgZD0iTSAwIDBMIDAgMzAgMzAgMzAgMzAgMCBaIi8+PHBhdGggZmlsbD0iIzkyMTMwQyIgc3Ryb2tlPSJub25lIiBkPSJNIDI1IDMwTCAzMCAyNSAzMCAyMCAyMCAzMCAyNSAzME0gMjAgMEwgMCAyMCAwIDI1IDI1IDAgMjAgME0gMTAgMEwgMCAxMCAwIDE1IDE1IDAgMTAgME0gMCA1TCA1IDAgMCAwIDAgNU0gMzAgMTVMIDMwIDEwIDEwIDMwIDE1IDMwIDMwIDE1TSAzMCA1TCAzMCAwIDAgMzAgNSAzMCAzMCA1IFoiLz48L3N2Zz4=
// @description 2/7/2026, 3:03:36 PM
// @namespace https://greasyfork.org/users/1184528
// ==/UserScript==

const origFillRect = CanvasRenderingContext2D.prototype.fillRect

const LEVELS = ["#999", "#777", "#555", "#444", "#222", "#000"]

const THRESHOLDS = [100, 1_000, 10_000, 50_000, 200_000]

function getLevel(area) {
  for (let i = 0; i < THRESHOLDS.length; i++) {
    if (area < THRESHOLDS[i]) return i
  }
  return 5
}

const maxLevel = 5

CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h) {
  const area = Math.abs(w * h)
  const canvasArea = this.canvas.width * this.canvas.height

  const ratio = area / canvasArea
  const level = Math.min(maxLevel, Math.floor(ratio * (maxLevel + 1)))

  const prev = this.fillStyle
  this.fillStyle = LEVELS[level]

  const r = origFillRect.call(this, x, y, w, h)
  this.fillStyle = prev
  return r
}