0

i have created a javascript canvas in which when user types a text, it will print on the image. the code is below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
  canvas {
    height: 500px;
    width: 500px;
  }
</style>


<div class="container">
  <div style="margin-top: 5%;" class="row">


    <div class="col-md-6"><canvas id="imageCanvas"></canvas></div>



    <div class="col-md-6"><input type="text" id="name" placeholder="Name" /></div>

  </div>
</div>





<script type="text/javascript">
  var text_title = "Heading";

  var canvas = document.getElementById('imageCanvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  // img.crossOrigin = "anonymous";

  window.addEventListener('load', DrawPlaceholder)

  function DrawPlaceholder() {
    img.onload = function() {
      DrawOverlay(img);
      DrawText(text_title);
      DynamicText(img)
    };
    img.src = 'card.png';

  }

  function DrawOverlay(img) {

    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);


    ctx.fillStyle = 'rgba(230, 14, 14, 0)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  function DrawText(text) {
    ctx.fillStyle = "black";
    ctx.textBaseline = 'middle';
    ctx.font = "50px 'Montserrat'";
    ctx.fillText(text, 50, 50);
  }

  function DynamicText(img) {
    document.getElementById('name').addEventListener('keyup', function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      DrawOverlay(img);
      text_title = this.value;
      DrawText(text_title);
    });
  }
</script>

everything is fine except the image. The image is not correctly coming in the canvas. Its being stretched or not getting its original size. i tried resizing the canvas and all. I want the original size of the image to appear as it is. Can anyone please tell me what should i do in my code to get the original size of the image. thanks in advance

Vishwas R
  • 3,340
  • 1
  • 16
  • 37
Seep Sooo
  • 145
  • 11
  • Place the image to the canvas using the basic arguments `ctx.drawImage(img, 0, 0);`, instead of cropping the image. – Teemu Jan 08 '20 at 12:51
  • i tried your code which is giving me cropped image – Seep Sooo Jan 08 '20 at 12:52
  • Please kindly resize the canvas according to the original image, before drawing the image. The original size of the image is stored in `naturalWidth/Height` properties of the image, `width` and `height` represent the presentation dimensions of the image placed on the page. – Teemu Jan 08 '20 at 12:53
  • @Teemu the image size is 500px * 500px. and the canvas size also same – Seep Sooo Jan 08 '20 at 12:59
  • Then it is not cropped, if you're not messing with the dimensions. – Teemu Jan 08 '20 at 13:00
  • @Teemu the image is not cropped, but the image is being blurred. – Seep Sooo Jan 08 '20 at 13:00
  • A few comments ago you said it's cropped ..? See https://stackoverflow.com/a/53525555/1169519, it shows how you can calculate the canvas size according to the image. – Teemu Jan 08 '20 at 13:01
  • @Teemu that is when i use your code, its being cropped – Seep Sooo Jan 08 '20 at 13:02
  • If you've a blurring problem, take a look at the post saman has linked on the comments of the question I've linked above. – Teemu Jan 08 '20 at 13:04
  • @Teemu i am new to js, if you could post it as answer editing my code please – Seep Sooo Jan 08 '20 at 13:06
  • Umh ... You've resized the canvas with CSS. That's what makes the image blurred. Set the `width` and `height` attributes of the `canvas` element instead. – Teemu Jan 08 '20 at 13:08
  • @Teemu where and how should i use it? – Seep Sooo Jan 08 '20 at 13:09
  • ?? You're writing faster than you're thinking = ). In the `canvas` element in the markup. Or in the script by setting the corresponding properties to that canvas element. – Teemu Jan 08 '20 at 13:10
  • @Teemu i told you i am new to javascript. i want the image in original size. so can you please edit my code and post as an answer. please – Seep Sooo Jan 08 '20 at 13:12

0 Answers0