Javascript error: Cannot read property 'width' of null

Question

I tried to get the color of pixels on an image. I found the code here: How to get a pixel's x,y coordinate color from an image?.

Error:

Uncaught TypeError: Cannot read property 'width' of null.

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

<script>

    var img = document.getElementById("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");
    var canvas = document.createElement("main");

    canvas.width = img.width;     //<-- error her
    canvas.height = img.height;

    pix = canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);







</script>

You're image element id is too long for this, i guess its not the ID, it's `src` — Dhaval Marthak, Nov 28 '17 at 09:54
id is not the URL.. _it is the element id in your html `img` tag_ — Suraj Rao, Nov 28 '17 at 09:54
You need to pass your `src` element `ID` here: `var img = document.getElementById`/ Not the full URL of your image! — Andrii Pryimak, Nov 28 '17 at 09:55
[Good to know](https://stackoverflow.com/questions/4672643/html5-canvas-getimagedata-and-same-origin-policy) about third party images in a canvas. — Teemu, Nov 28 '17 at 10:06

score 0 · Answer 1 · answered Nov 28 '17 at 09:55

I tried to get the color of pixels on an image.

Error:

Uncaught TypeError: Cannot read property 'width' of null.

Looks like you want to select the image by its src property. Use querySelector instead since it is unlikely that you have an image with this id.

Then replace this line

 var img = document.getElementById("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");

by

var img = document.querySelector("img[src='https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png']");

score 0 · Answer 2 · answered Nov 28 '17 at 09:55

This is because your script might be in the head or your image is getting loaded slowly so that it's getting executed after the script is run.

Use this:

    var img = new Image();
    img.src = "https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png"
    img.onload = function(){
      var height = img.height;
      var width = img.width;

      // code here to use the dimensions
    }

Matias Cicero · Answer 3 · 2017-11-28T10:05:10.867

You are providing the image's src attribute, not the id.

If your element has an ID, then it's very simple, you just specify it:

var img = document.getElementById("yourImgId");

If your element does not have an ID, I recommend you add one to it if you're going to access it from JavaScript.

If your element does not have an ID, and you cannot add it, then try this solution:

function getImgBySrc(src) {
    var allImages = document.getElementsByTagName("img");
    for(var i = 0; i < allImages.length; i++)
        if (allImages[i].src === src) {
            return allImages[i];
        }
    }
}

And then:

var img = getImgBySrc("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");

canvas.width = (img && img.width) || 200; // Provide a default width if image was not found
canvas.height = (img && img.height) || 400; // Provide a default height if image was not found

Javascript error: Cannot read property 'width' of null

3 Answers3