The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a meme generator

Written by

Bernardo Palos

in

Here’s a simple Meme Generator web app using HTML, CSS, and JavaScript. It allows you to upload an image, add top and bottom text, and download the meme.

I’ll provide the complete code that you can copy and run in a single HTML file:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Meme Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 2rem;
      background: #f4f4f4;
    }
    canvas {
      max-width: 100%;
      border: 2px solid #333;
      margin: 1rem 0;
    }
    input[type="text"], input[type="file"] {
      margin: 0.5rem 0;
      padding: 0.5rem;
      width: 80%;
      font-size: 1rem;
    }
    button {
      padding: 0.7rem 1.2rem;
      margin-top: 1rem;
      background-color: #333;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #555;
    }
  </style>
</head>
<body>

  <h1>Meme Generator</h1>
  <input type="file" id="imageInput" accept="image/*"><br>
  <input type="text" id="topText" placeholder="Top text"><br>
  <input type="text" id="bottomText" placeholder="Bottom text"><br>
  <button onclick="generateMeme()">Generate Meme</button>
  <button onclick="downloadMeme()">Download Meme</button>
  <br>
  <canvas id="memeCanvas"></canvas>

  <script>
    const canvas = document.getElementById('memeCanvas');
    const ctx = canvas.getContext('2d');
    let image = new Image();

    document.getElementById('imageInput').addEventListener('change', function (e) {
      const reader = new FileReader();
      reader.onload = function () {
        image.src = reader.result;
      };
      reader.readAsDataURL(e.target.files[0]);
    });

    image.onload = function () {
      canvas.width = image.width;
      canvas.height = image.height;
      generateMeme();
    };

    function generateMeme() {
      const topText = document.getElementById('topText').value.toUpperCase();
      const bottomText = document.getElementById('bottomText').value.toUpperCase();

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

      const fontSize = canvas.width / 10;
      ctx.font = `bold ${fontSize}px Impact`;
      ctx.fillStyle = 'white';
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 5;
      ctx.textAlign = 'center';

      ctx.fillText(topText, canvas.width / 2, fontSize + 10);
      ctx.strokeText(topText, canvas.width / 2, fontSize + 10);

      ctx.fillText(bottomText, canvas.width / 2, canvas.height - 20);
      ctx.strokeText(bottomText, canvas.width / 2, canvas.height - 20);
    }

    function downloadMeme() {
      const link = document.createElement('a');
      link.download = 'meme.png';
      link.href = canvas.toDataURL();
      link.click();
    }
  </script>

</body>
</html>

Features:

  • Uploads an image

  • Adds top and bottom text

  • Uses bold white text with a black outline (classic meme style)

  • Allows you to download the final image as PNG

You can run this code by saving it as meme-generator.html and opening it in any browser. Let me know if you want advanced features like draggable text, font choice, or image filters.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About