Rysowany tekst w HTML – jak wygenerować obrazek z tekstem?

przez

Czy kiedykolwiek chciałeś stworzyć tekst jako obrazek, ale bez używania Photoshopa czy innych narzędzi graficznych? Może chcesz zrobić logo z napisem, nagłówek w stylu retro, albo dynamiczny podpis generowany przez użytkownika? Jeśli tak, to świetnie trafiłeś.

W tym artykule pokażę Ci, jak w prosty sposób wygenerować obrazek z tekstem w HTML, używając tylko przeglądarki i kilku linijek kodu JavaScript.
Nie potrzebujesz żadnych zewnętrznych bibliotek, serwerów ani Photoshopa — wszystko zrobimy w przeglądarce!

Co to znaczy „rysowany tekst”?

Zacznijmy od podstaw.
Rysowany tekst to po prostu tekst narysowany na obrazie (bitmapie), zamiast wyświetlany jako zwykły tekst HTML. Oznacza to, że możemy:

  • zapisać go jako plik .png, .jpg lub .webp,
  • użyć efektów graficznych (gradienty, cienie, obroty, filtry),
  • połączyć go z innymi elementami graficznymi,
  • a nawet wygenerować go dynamicznie w zależności od danych użytkownika.

Idealne rozwiązanie, jeśli chcesz stworzyć np. baner z imieniem użytkownika, miniaturę YouTube z podpisem, albo generowany podpis do e-maila.

Narzędzie, którego potrzebujesz – <canvas>

Cała magia dzieje się dzięki HTML5 Canvas.
Canvas to element HTML, który pozwala „rysować” grafiki, kształty, obrazy i właśnie tekst – za pomocą JavaScriptu.

Przykładowa struktura wygląda tak:

<canvas id="myCanvas" width="600" height="200"></canvas>

To trochę jak czyste płótno, na którym możemy rysować.
Aby coś na nim narysować, używamy JavaScriptu i tzw. kontekstu rysowania.

Jak narysować tekst na canvasie?

Zobaczmy najprostszy przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Rysowany tekst w HTML</title>
</head>
<body>
  <canvas id="myCanvas" width="600" height="200"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d'); // kontekst rysowania 2D

    ctx.fillStyle = '#007BFF';           // kolor tekstu
    ctx.font = 'bold 48px Arial';        // styl czcionki
    ctx.textAlign = 'center';            // wyrównanie
    ctx.fillText('Cześć, świecie!', 300, 100); // rysujemy tekst
  </script>
</body>
</html>

Efekt?
Na białym tle pojawi się niebieski napis „Cześć, świecie!” dokładnie na środku płótna.

Dodajmy trochę stylu – cienie, gradienty, obramowanie

Canvas pozwala na naprawdę sporo efektów graficznych.
Sprawdźmy, jak dodać cień i gradient, żeby nasz tekst wyglądał jak prawdziwe logo.

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Tworzymy gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#ff9900');

// Ustawienia stylu
ctx.font = 'bold 60px "Comic Sans MS"';
ctx.fillStyle = gradient;
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.textAlign = 'center';

// Rysujemy tekst
ctx.fillText('Rysowany Tekst', canvas.width / 2, 120);
</script>

Efekt końcowy?
Kolorowy, cieniowany napis z ładnym gradientem i cieniem — wygląda jak profesjonalne logo!

💾 Jak zapisać tekst jako obrazek?

Świetnie! Ale co, jeśli chcesz zapisać ten tekst jako plik PNG?

Nic prostszego! Canvas ma metodę toDataURL(), która pozwala pobrać zawartość płótna jako obrazek.

Dodajmy przycisk „Pobierz obraz”:

<button id="saveBtn">💾 Pobierz obraz</button>

<script>
document.getElementById('saveBtn').addEventListener('click', function() {
  const link = document.createElement('a');
  link.download = 'tekst.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
});
</script>

Kliknięcie przycisku wygeneruje obrazek tekst.png z Twoim napisem.
Bez serwera, bez dodatkowych bibliotek. Po prostu magia HTML5.

Personalizowany tekst użytkownika

A teraz zróbmy coś jeszcze fajniejszego — użytkownik wpisuje swój tekst, a my generujemy obrazek z tym napisem.

Oto kompletny przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Generator tekstu jako obrazek</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 40px;
    }
    input, button {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>🖋️ Generator rysowanego tekstu</h1>
  <input type="text" id="userText" placeholder="Wpisz swój tekst..." />
  <button id="drawBtn">Rysuj</button>
  <button id="saveBtn">💾 Zapisz obraz</button>

  <canvas id="myCanvas" width="800" height="200"></canvas>

  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    function drawText(text) {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // czyszczenie
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
      gradient.addColorStop(0, '#00c6ff');
      gradient.addColorStop(1, '#0072ff');

      ctx.font = 'bold 70px Verdana';
      ctx.fillStyle = gradient;
      ctx.textAlign = 'center';
      ctx.shadowColor = 'rgba(0,0,0,0.4)';
      ctx.shadowBlur = 8;
      ctx.shadowOffsetX = 4;
      ctx.shadowOffsetY = 4;

      ctx.fillText(text, canvas.width / 2, 130);
    }

    document.getElementById('drawBtn').addEventListener('click', () => {
      const text = document.getElementById('userText').value || 'Hello World!';
      drawText(text);
    });

    document.getElementById('saveBtn').addEventListener('click', () => {
      const link = document.createElement('a');
      link.download = 'tekst.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
    });
  </script>
</body>
</html>

Teraz możesz wpisać dowolny tekst, kliknąć „Rysuj”, a następnie zapisać jako obrazek.
To idealny przykład dynamicznego generowania grafiki w przeglądarce.

Dodatkowe efekty, które możesz dodać

Jeśli chcesz pójść o krok dalej, oto kilka pomysłów:

1. Obrót tekstu

Możesz obrócić tekst przed jego narysowaniem:

ctx.save();
ctx.translate(400, 100);
ctx.rotate(-0.2); // obrót o -0.2 radiana (~11 stopni)
ctx.fillText("Obrócony tekst", 0, 0);
ctx.restore();

2. Obrys tekstu

Zamiast (lub oprócz) wypełnienia możesz użyć obrysu:

ctx.strokeStyle = '#000';
ctx.lineWidth = 3;
ctx.strokeText("Obrysowany napis", 400, 150);

3. Efekt tęczy

Zmieniaj kolory co literę:

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const text = 'Kolorowy napis!';
for (let i = 0; i < text.length; i++) {
  ctx.fillStyle = colors[i % colors.length];
  ctx.fillText(text[i], 100 + i * 40, 150);
}

Jak dodać własne czcionki?

Jeśli chcesz użyć niestandardowej czcionki (np. z Google Fonts), wystarczy, że ją załadujesz w <head>:

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">

A potem w JavaScript:

ctx.font = '60px "Pacifico"';
ctx.fillText('Stylowy tekst', 300, 120);

Zastosowania w praktyce

Taki rysowany tekst w HTML można wykorzystać w naprawdę wielu miejscach:

  1. Dynamiczne banery – np. na stronie z życzeniami („Wszystkiego najlepszego, Aniu!”).
  2. Generatory podpisów – użytkownik wpisuje imię, a Ty generujesz obrazek.
  3. Miniatury filmów lub wpisów blogowych – automatyczne dodawanie tytułów.
  4. Watermark (znak wodny) – np. do zabezpieczania zdjęć.
  5. Logo online – użytkownik może sam stworzyć swoje logo bez Photoshopa.

Rysowany tekst w HTML to świetny sposób, by dodać kreatywności do swojej strony.
Dzięki elementowi <canvas> i odrobinie JavaScriptu możesz:

✅ Tworzyć własne grafiki i logotypy
✅ Generować tekst jako obrazek w locie
✅ Personalizować treść dla użytkownika
✅ Dodawać efekty graficzne i animacje

I co najważniejsze — wszystko działa bez żadnych wtyczek i programów graficznych.

Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl