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 · 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

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

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

[javascript] How to add image to canvas

Examples related to javascript

Examples related to html

Examples related to canvas