Draw an image in canvas using Javascript ⌨️

We will create an app that allows user to upload an image and then we will display it in the canvas.

First let’s create a file inputbox . Also create a canvas to display the image.

<div>

   <input type="file" id="fileinput" accept = "image/*">  

</div>

<canvas id= "canvas"></canvas>

type = file ; to say that the input-box accepts files as input.

accept = image/* → to accept all types of images only.

Now let’s add the Javascript for uploading image.

Steps :

• Add change event listener 👂 to the file input.

let fileInput = document.getElementById('fileinput');

fileInput.addEventListener('change', function(ev) {

});

• We can access the file uploaded using event.target.files or if you want to access files without the event object then we can access using the fileInput.files .

let fileInput = document.getElementById('fileinput');

fileInput.addEventListener('change', function(ev) {

   if(ev.target.files) {

      let file = ev.target.files[0];

   }

});

• Create a FileReader object, and convert the file uploaded into DataURL with the help of readASDataURL method in FileReader.

A Data URL is a URI scheme that provides a way to inline data in a document, and it’s commonly used to embed images in HTML and CSS

let fileInput = document.getElementById('fileinput');

fileInput.addEventListener('change', function(ev) {

   if(ev.target.files) {

       let file = ev.target.files[0]; //get first file

       var reader  = new FileReader();

       reader.readAsDataURL(file);

    }

});

• Add loadend event listener to file reader , this event is triggered when the fileReader finish converting the file into dataURL.

reader.onloadend = function (e) {

}

• Once the fileReader converted the image to dataURL then we need to create an Image object.

reader.onloadend = function (e) {

var image = new Image();

}

• Set the source of the image as the dataURL

reader.onloadend = function (e) {

var image = new Image();

image.src = e.target.result;

}

• Add load event listener to the image . So once the image is loaded we can draw the image to canvas.

reader.onloadend = function (e) {

var image = new Image();

image.src = e.target.result;

image.onload = function(ev) {

   }

}

• Once the image is loaded we need to draw the image on the canvas using drawImage method of canvas context .

reader.onloadend = function (e) {

    var image = new Image();

    image.src = e.target.result;

    image.onload = function(ev) {

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

       canvas.width = image.width;

       canvas.height = image.height;

       var ctx = canvas.getContext('2d');

       ctx.drawImage(image,0,0);

    }

}

Now the complete code is

let fileInput = document.getElementById('fileinput');

fileInput.addEventListener('change', function(ev) {

   if(ev.target.files) {

      let file = ev.target.files[0];

      var reader  = new FileReader();

      reader.readAsDataURL(file);

      reader.onloadend = function (e) {

          var image = new Image();

          image.src = e.target.result;

          image.onload = function(ev) {

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

             canvas.width = image.width;

             canvas.height = image.height;

             var ctx = canvas.getContext('2d');

             ctx.drawImage(image,0,0);
         }

      }

   }

});