无法使用 HTML 和 JavaScript 显示完整的图像绘制画布

Question

I can not able to draw the full image using canvas. Here is my code:

<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="couponimg" style="display:none;" id="blankImagediv">
<img class="img-responsive thumbnail" style="margin-bottom:9px; display:none;" src="http://oditek.inimages/coupon-banner-blank.jpg" crossorigin="anonymous" id="requiredImage">
<canvas id="canvas" class="img-responsive thumbnail" style="margin-bottom:9px;"></canvas>
</div>
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
    canvas.width = $('#requiredImage').width();
    canvas.crossOrigin = "Anonymous";
    canvas.height = $('#requiredImage').height();
    ctx.drawImage($('#requiredImage').get(0), 0, 0);
    ctx.font = ":26pt Calibri";
    $(document).on('input','#copTitle',function(){
        $('#blankImagediv').css('display','block');
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage($('#requiredImage').get(0), 0, 0);
        ctx.fillStyle = "#0D5F90";
        ctx.fillText($(this).val(),40,80);
    })

Here I am getting the half of the image of original image while drawing. The right hand side of the image is not displaying.

Answer 1

hi try with following code...

 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 = ":26pt 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(), 40, 80);
  });
  function drawImage()
  {
     ctx.drawImage(img, 0, 0);
  }