Could not draw multiple text on image using canvas and Javascript

Question

I need one help. I am unable to draw multiple text on canvas using canvas and Javascript. I am explaining my code below.

<div class="form-group">
<label for="exampleInputEmail1">Coupon Title</label>
<input type="text" name="emails" id="copTitle" class="form-control" placeholder="Add Coupon Title" value="<?php echo $email; ?>" required>
</div>

<div class="form-group">
<label for="coupondiscount">Coupon Discount</label>
<input name="coupondiscount" id="coupondiscount" class="form-control" placeholder="Add Coupon Discount" value="<?php echo $email; ?>" type="text"  required>
</div>
 <div class="couponimg" style="display:none;" id="blankImagediv">
<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none;" src="images/coupon-banner-blank.jpg" crossorigin="anonymous" id="requiredImage">
<canvas id="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas>
</div>

My javascript part is given below.

var canvas = document.getElementById('canvas'),
  img = document.getElementById('requiredImage'),
  ctx = canvas.getContext('2d');
  img.onload = drawImage;
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.font = "26px Calibri";
  $(document).on('input', '#copTitle', function() {
      $('#blankImagediv').css('display', 'block');

      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.fillStyle = "#0D5F90";
      ctx.fillText($(this).val(), 160, 40);
  });
  $(document).on('input', '#coupondiscount', function() {
      console.log('hii');
      $('#blankImagediv').css('display', 'block');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0);
      ctx.fillStyle = "#0D5F90";
      ctx.fillText($(this).val(), 180, 90);
  });
  function drawImage()
  {
     ctx.drawImage(img, 0, 0);
  }

Here i need when user will write text on first input field it will written top of the image and when the user will write text on second input field it will written on the different place of the image but the first text should not replace.Here my problem is each text is replacing with others.Please help me.

Answer 1

I think the reason is you are clearing the canvas each time, and draw the image then insert the text. So it removes the old text and add the new one. Please try the below code if it matches your requirement, may be it helps you.

var canvas = document.getElementById('canvas'),
img = document.getElementById('requiredImage'),
ctx = canvas.getContext('2d');
img.onload = drawImage;
canvas.width = img.width;
canvas.height = img.height;
ctx.font = "26px Calibri";
$(document).on('input', '#copTitle', function() {
    $('#blankImagediv').css('display', 'block');

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
    ctx.fillStyle = "#0D5F90";
    ctx.fillText($(this).val(), 160, 40);
});
$(document).on('input', '#coupondiscount', function() {
    ctx.fillStyle = "#0D5F90";
    ctx.fillText($(this).val(), 180, 90);
});
function drawImage()
{
   ctx.drawImage(img, 0, 0);
}