Drawing filled textSection

by Pranab Dey

HTML

Name: <input type="text" id="name">
<p>Email: <input type="text" id="email"></p>
<p>Message: <textarea name="message" id="message" cols="30" rows="5"></textarea></p>
<p>Background:</p>
<button class="backColor">Color</button><button class="backImg">Image</button>
<div class="bgColor--select">
  <input type="color" name="color" id="bgColor">
</div>
<div class="bgImg--select">
  <label for="img1">
    <img src="http://files.escapade-basque.webnode.fr/system_preview_detail_200000029-83f9184f39-public/sticker-croix-basque.jpg" alt="image" class="image" style="width: 50px;">
    <input type="radio" name="image1" id="img1">
  </label>
  <!-- http://www.floradecanarias.com/imagenes/pinus_canariensis3.jpg -->
  <label for="img2">
    <img src="http://www.floradecanarias.com/imagenes/pinus_canariensis3.jpg" alt="image2" class="image" style="width: 50px;">
    <input type="radio" name="image1" id="img2">
  </label>
</div>
<p>Color: <input type="color" value="#ffffff" name="color" id="textColor"></p>
<!-- <p>Border Width: 0<input type="range" name="range" id="borderWidth" min="0" max="50" value="0">50</p>
<p>Border Color: <input type="color" name="color" id="borderColor"></p>
<p>Border Style: <select name="select" id="borderStyle">
  <option value="">Select</option>
  <option value="solid">Solid</option>
  <option value="dashed">Dash</option>
  <option value="double">Double</option>
</select></p> -->
<p><button class="generate">Create</button></p>
<hr/>
<div class="main">
  <p>Preview: </p>
  <canvas id="canvas"></canvas>
</div>
<hr/>
<div class="result"></div>

CSS

canvas {
  box-sizing: border-box;
}
.bgImg--select, .bgColor--select{
  display: none;
}
.backColor, .backImg{
  cursor: pointer;
}

JavaScript

var bg = document.querySelector("#bgColor");
var borderColor = document.querySelector("#borderColor");
var borderWidth = document.querySelector("#borderWidth");
var borderStyle = document.querySelector("#borderStyle");
var font = document.querySelector("#textColor");
var name = document.querySelector("#name");
var email = document.querySelector("#email");
var msg = document.querySelector("#message");
var canvas = document.querySelector("#canvas");
var img = document.querySelector(".image");
var canva = canvas.getContext("2d");
var bWidth = "0px",
  bStyle = "solid",
  bColor = "transparent";
var gen = document.querySelector(".generate");
var result = document.querySelector(".result");

canvas.style.background = "black";
canvas.style.width = "350px";
canvas.style.border = `${bWidth}px ${bColor} ${bStyle}`;

function nameEmail() {
  let f = '';
  if (this === name) {
    f = this.value;
    canva.font = "18px sans-serif";
    canva.textBaseline = "top";
    canva.fillText(f, 80, 10);
  } else {
    canva.font = "18px sans-serif";
    canva.textBaseline = "top";
    canva.fillText(this.value, 80, 50);
  }
}

name.onchange = nameEmail;
email.oninput = nameEmail;

/* borderWidth.oninput = function() {
  bWidth = this.value;
  canvas.style.border = `${bWidth}px ${bColor} ${bStyle}`;
}

borderColor.onchange = function() {
  bColor = this.value;
  canvas.style.border = `${bWidth}px ${bColor} ${bStyle}`;
}

borderStyle.onchange = function() {
  bStyle = this.value;
  canvas.style.border = `${bWidth}px ${bColor} ${bStyle}`;
} */

bg.onchange = function() {
  canvas.style.background = this.value;
}

font.onchange = function() {
  canva.fillStyle = this.value;
  canva.font = "18px sans-serif";
  canva.textBaseline = "top";
  canva.fillText("Name: ", 10, 10);
  canva.fillText("Email: ", 10, 50);
}

canva.fillStyle = "white";
canva.font = "18px sans-serif";
canva.textBaseline = "top";
canva.fillText("Name: ", 10, 10);
canva.fillText("Email: ", 10, 50);

var backColor =...