CODEWITHSUNDEEP
javascripthtmlhtml5-canvasdrawimage
a1626
a1626

Reputation: 2964

Canvas.drawImage not working

I know this question has been asked lot of times, but i am not able to figure out what am i doing wrong

var canvas = document.getElementById('myCanvas');

function handleFiles(files) {
  var preview = document.getElementById('preview');
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;

    if (!imageType.test(file.type)) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.src = URL.createObjectURL(file);
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    img.onload = drawImage(img);

  }
}
var drawImage = function(img) {
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

}
<div id="preview"></div>
<input type="file" onchange="handleFiles(this.files)">
<canvas id="myCanvas"></canvas>

Upvotes: 0

Views: 2702

Answers (1)

Madhawa Priyashantha
Madhawa Priyashantha

Reputation: 9900

DEMO

it should be 

img.onload = function(){drawImage(img)};

if there is no method argument you can call

img.onload = drawImage;

instead of 

 img.onload = drawImage()// not correct

syntax is 

x.onload = funcRef;//reference

you should assign a function reference .if you assign drawImage(img) then return value of drawImage(img) will be assigned to onload function

Upvotes: 1

Related Questions