How to add image to canvas

Question

I m experimenting a bit with the new canvas element in HTML   I simply want to add an image to the canvas but it doesn t work for some reason   I have the following code   HTML   lt canvas id  viewport  gt  lt  canvas gt    CSS  canvas viewport   border  1px solid white  width  900px      JS  var canvas   document getElementById  viewport    context   canvas getContext  2d     make base     function make base       base image   new Image      base image src    img base png     context drawImage base image  100  100       The image exists and I get no JavaScript errors  The image just doesn t display   It must be something really simple I ve missed

User · Accepted Answer

You need to wait until the image is loaded before you draw it. Try this instead:

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }
}

i.e. draw the image in the onload callback of the image.

User · Answer

You have to use  onload  let canvas   document getElementById  myCanvas    let ctx   canvas getContext  2d      const drawImage    url    gt        const image   new Image        image src   url      image onload        gt           ctx drawImage image  0  0            Here s Why  If you are loading the image first after the canvas has already been created then the canvas won t be able to pass all the image data to draw the image  So you need to first load all the data that came with the image and then you can use drawImage

User · Answer

In my case  I was mistaken the function parameters  which are   context drawImage image  left  top   context drawImage image  left  top  width  height     If you expect them to be  context drawImage image  width  height     you will place the image just outside the canvas with the same effects as described in the question

User · Answer

here is the sample code to draw image on canvas-      selectedImage   change function e     var URL   window URL  var url   URL createObjectURL e target files 0    img src   url   img onload   function         var canvas   document getElementById  myCanvas        var ctx   canvas getContext  2d                 ctx clearRect 0  0  canvas width  canvas height       ctx drawImage img  0  0  500  500          In the above code selectedImage is an input control which can be used to browse image on system  For more details of sample code to draw image on canvas while maintaining the aspect ratio   http   newapputil blogspot in 2016 09 show-image-on-canvas-html5 html

[javascript] How to add image to canvas

Examples related to javascript

Examples related to html

Examples related to canvas