使用畫布和Javascript無法在圖像上繪製多個文字

Question

我需要一個幫助。我無法使用畫布和Javascript在畫布上繪製多個文本。我在下面解釋我的代碼。

<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> 

我的javascript部分如下。

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); 
    } 

在這裏，我需要的時候用戶會寫一篇關於第一個輸入字段中的文本將寫入的圖像的頂部，當用戶將寫在第二個輸入字段中的文本，將寫在不同地方的圖​​像，但第一文字不應該取代。在這裏，我的問題是每個文本都替換別人。請幫助我。

Answer 1

我認爲原因是你每次都清除畫布，然後繪製圖像然後插入文本。所以它刪除舊文本並添加新文本。請嘗試下面的代碼，如果它符合您的要求，可能會幫助你。

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); 
}