Watermark

Canvas-based watermark overlay generator — text or image watermark, configurable opacity, angle, repeat pattern.

canvas vanilla-js

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  width: 100%;
  max-width: 560px;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* ── Watermark container ── */
.wm-container {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.5rem;
}

/* ── Target (positioning context) ── */
.wm-target {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ── Canvas (injected by JS) ── */
.wm-target canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ── Placeholder content ── */
.wm-placeholder {
  position: relative;
  width: 100%;
  min-height: 260px;
  background: #0f172a;
}

.wm-placeholder-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
}

.wm-skeleton {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Skeleton lines */
.sk-line {
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.sk-line--title {
  height: 1.25rem;
  width: 60%;
}
.sk-line--sub {
  width: 80%;
}
.sk-line--short {
  width: 50%;
}

.sk-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.25rem 0;
}

.sk-img {
  width: 100%;
  height: 120px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Controls panel ── */
.wm-controls {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ctrl-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ctrl-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.ctrl-value {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
  text-align: right;
}

.ctrl-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: #f2f6ff;
  font-family: inherit;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  outline: none;
  transition: border-color 0.15s;
}

.ctrl-input:focus {
  border-color: rgba(56, 189, 248, 0.5);
}

/* Range slider */
.ctrl-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.ctrl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.ctrl-range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.25);
}

.ctrl-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: #38bdf8;
  cursor: pointer;
}

.ctrl-range:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.5);
  outline-offset: 2px;
}

(function () {
  "use strict";

  const target = document.getElementById("wm-target");
  const inputText = document.getElementById("wm-text");
  const inputOpacity = document.getElementById("wm-opacity");
  const inputAngle = document.getElementById("wm-angle");
  const inputSize = document.getElementById("wm-size");
  const inputGap = document.getElementById("wm-gap");

  const valOpacity = document.getElementById("wm-opacity-val");
  const valAngle = document.getElementById("wm-angle-val");
  const valSize = document.getElementById("wm-size-val");
  const valGap = document.getElementById("wm-gap-val");

  if (!target) return;

  // Create canvas
  const canvas = document.createElement("canvas");
  target.appendChild(canvas);
  const ctx = canvas.getContext("2d");

  let rafId = null;

  function draw() {
    const text = inputText.value.trim() || "Watermark";
    const opacity = Number(inputOpacity.value) / 100;
    const angle = Number(inputAngle.value) * (Math.PI / 180);
    const fontSize = Number(inputSize.value);
    const gap = Number(inputGap.value);

    // Size canvas to target
    const rect = target.getBoundingClientRect();
    const w = rect.width;
    const h = rect.height;
    canvas.width = w;
    canvas.height = h;

    ctx.clearRect(0, 0, w, h);

    // Text style
    ctx.save();
    ctx.globalAlpha = opacity;
    ctx.fillStyle = "#f2f6ff";
    ctx.font = `600 ${fontSize}px Inter, system-ui, sans-serif`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Tile pattern: iterate across a rotated grid
    // We use a large enough iteration range to cover the canvas even after rotation
    const diagonal = Math.ceil(Math.sqrt(w * w + h * h));
    const cols = Math.ceil(diagonal / gap) + 2;
    const rows = Math.ceil(diagonal / gap) + 2;

    ctx.translate(w / 2, h / 2);
    ctx.rotate(angle);

    for (let row = -rows; row <= rows; row++) {
      for (let col = -cols; col <= cols; col++) {
        const x = col * gap;
        const y = row * gap;
        ctx.fillText(text, x, y);
      }
    }

    ctx.restore();
  }

  function scheduleDraw() {
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(draw);
  }

  // Sync display values
  function syncValues() {
    valOpacity.textContent = inputOpacity.value + "%";
    valAngle.textContent = inputAngle.value + "°";
    valSize.textContent = inputSize.value + "px";
    valGap.textContent = inputGap.value + "px";
  }

  // Bind inputs
  [inputText, inputOpacity, inputAngle, inputSize, inputGap].forEach(function (el) {
    el.addEventListener("input", function () {
      syncValues();
      scheduleDraw();
    });
  });

  // Redraw on resize
  const resizeObserver = new ResizeObserver(scheduleDraw);
  resizeObserver.observe(target);

  // Initial render
  syncValues();
  draw();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Watermark</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Watermark</h1>
    <p class="demo-sub">Canvas-based text watermark — live preview with controls.</p>

    <!-- Watermark preview -->
    <div class="wm-container">
      <div class="wm-target" id="wm-target" aria-label="Image with watermark overlay">
        <!-- Placeholder image -->
        <div class="wm-placeholder">
          <div class="wm-placeholder-gradient"></div>
          <!-- Fake content skeleton -->
          <div class="wm-skeleton">
            <div class="sk-line sk-line--title"></div>
            <div class="sk-line sk-line--sub"></div>
            <div class="sk-line sk-line--sub sk-line--short"></div>
            <div class="sk-divider"></div>
            <div class="sk-img"></div>
          </div>
        </div>
        <!-- Canvas is injected here by JS -->
      </div>
    </div>

    <!-- Controls panel -->
    <form class="wm-controls" aria-label="Watermark settings" novalidate>

      <div class="ctrl-row">
        <label class="ctrl-label" for="wm-text">Text</label>
        <input
          class="ctrl-input"
          type="text"
          id="wm-text"
          value="© StealThis"
          maxlength="40"
          aria-label="Watermark text"
        />
      </div>

      <div class="ctrl-row">
        <label class="ctrl-label" for="wm-opacity">
          Opacity
          <span class="ctrl-value" id="wm-opacity-val">18%</span>
        </label>
        <input
          class="ctrl-range"
          type="range"
          id="wm-opacity"
          min="1"
          max="80"
          value="18"
          aria-label="Watermark opacity"
        />
      </div>

      <div class="ctrl-row">
        <label class="ctrl-label" for="wm-angle">
          Angle
          <span class="ctrl-value" id="wm-angle-val">−30°</span>
        </label>
        <input
          class="ctrl-range"
          type="range"
          id="wm-angle"
          min="-90"
          max="0"
          value="-30"
          aria-label="Watermark angle"
        />
      </div>

      <div class="ctrl-row">
        <label class="ctrl-label" for="wm-size">
          Font size
          <span class="ctrl-value" id="wm-size-val">16px</span>
        </label>
        <input
          class="ctrl-range"
          type="range"
          id="wm-size"
          min="8"
          max="36"
          value="16"
          aria-label="Watermark font size"
        />
      </div>

      <div class="ctrl-row">
        <label class="ctrl-label" for="wm-gap">
          Spacing
          <span class="ctrl-value" id="wm-gap-val">100px</span>
        </label>
        <input
          class="ctrl-range"
          type="range"
          id="wm-gap"
          min="40"
          max="240"
          value="100"
          aria-label="Watermark tile spacing"
        />
      </div>

    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

Watermark

A Canvas 2D-based watermark generator. Renders a tiling text (or image) watermark at a configurable angle and opacity over any container element. Controls let you tune the text, opacity, rotation, size, and spacing in real time.

How it works

A <canvas> element is absolutely positioned over the target container. The canvas draws repeated rotated text tiles across its full area. Every control change re-draws the canvas via requestAnimationFrame.

Features

Live preview with real-time canvas redraw
Configurable: text, opacity (0–100%), angle (0–90°), font size, spacing
Pure vanilla JS + Canvas 2D API
No external libraries
Export-ready: the canvas can be converted to a data URL via canvas.toDataURL()

Usage

Wrap your content in an element with class="wm-target" and call initWatermark(target, options). The watermark canvas is appended as a sibling and positioned over the target.