Generate Image From Text using JavaScript

This code allows you to convert text into an image using JavaScript. By entering your desired text into the input field provided and clicking the “+ Create Image” button, the code will generate an image with your text displayed on a canvas. The generated image can be shared by right-clicking and copying it.

The core functionality of the code lies in the makeImage and updateCanvas functions. The makeImage function prevents the default form submission behavior, captures the entered text, and calls the updateCanvas function to update the canvas with the text. The updateCanvas function handles the drawing of the text on the canvas, taking care of font size adjustments to fit the text within the canvas dimensions.

This code is helpful if you need a quick and easy way to convert text into an image using JavaScript.

How to Create Generate Image From Text using JavaScript

1. Create the HTML structure for image generator as follows:

<div class="big-label">
  <h2>Text to Image</h2>
  <form class="the-words">
    <input class="form-control" type="text" name="words" placeholder="Put Some Text Here" required="required"/>
    <input class="btn" type="submit" value="+ Create Image"/>
  </form>
</div>
<p class="help">You can share the generated image by right clicking and copying </p>
<canvas id="myCanvas"></canvas>

2. Style the image generator interface using the following CSS:

/* colors */
html {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  font-family: "VT323", monospace;
  display: block;
  text-align: center;
}

.big-label {
  color: #39FF14;
  text-align: center;
  font-size: 2em;
}

.help {
  margin: 15px auto;
  color: #39FF14;
}

.the-words {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 100px;
  border: 1px solid #fff;
   margin: 10px auto;
}
.the-words input {
  padding: 1em;
  margin: 3em;
}
.the-words .btn {
  background-color: #39FF14;
}

#myCanvas {
  margin-top: 0%;
  width: 600px;
  height: 300px;
  border: 1px solid #fff;
}

3. Finally, add the following JavaScript code just before closing the body element to generate images from text.

// PROPERTIES
// document elements
const wordsForm = document.querySelector(".the-words");

function makeImage(e) {
  e.preventDefault();
  updateCanvas(
  this.querySelector("[name=words]").value
  );
  this.reset();
}


function updateCanvas(text) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, 400, 200);
  ctx.fillStyle = "#212121";
  ctx.fillRect(0, 0, 400, 200)
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, '#39FF14');
  gradient.addColorStop(1, 'white');
  ctx.fillStyle = gradient;
  var fontface = "Courier";
  ctx.font = "30px Courier";
  ctx.textAlign = 'center';
  // start with a large font size
    var fontsize=300;
    // lower the font size until the text fits the canvas
    do{
        fontsize--;
        ctx.font=fontsize+"px "+fontface;
    }while(ctx.measureText(text).width>c.width)
  ctx.fillText(text, 150, 100);
  console.log(ctx.measureText(text).width);
}

wordsForm.addEventListener("submit", makeImage);

That’s all! hopefully, you have successfully created an image generator from text. If you have any questions or suggestions, feel free to comment below.