Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at drawCanvas (userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:56) at setTimeout (userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:59)

I am trying to load images to a canvas based on url input, i've tried adding event listeners and a logger, none seem to work.

setTimeout(() => {

    let startpanel = document.getElementById('startpanel')

    // image for skin
    var img = document.createElement("img");
    img.style.width = "220px";
    img.style.height = "177px";

    // input custom skin
    var skinInput = document.createElement("input");
    skinInput.placeholder = "skin url";
    skinInput.style.width = "150px";
    skinInput.style.height = "35px";

    skinInput.onblur = function() {
        const newImage = new Image();
        newImage.src = skinInput.value;
        img.src = skinInput.value;
        drawCanvas(newImage);
      };

    startpanel.appendChild(skinInput)

    // draw skin
    var appearance = document.createElement("canvas");
    appearance.id = "appearance";
    // appearance.style.position = "absolute";
    appearance.style.top = "100px";
    appearance.style.width = "200px";
    appearance.style.height = "177px";
    appearance.style.border = "1px solid #d3d3d3";
    startpanel.appendChild(appearance)

    const drawCanvas = (newImage) => {
        var ctx = appearance.getContext("2d");
        ctx.drawImage(newImage, 10, 10);
      }

      drawCanvas();

}, 3000);

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at drawCanvas (userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:56) at setTimeout (userscript.html?id=0e769594-f15d-490f-a75c-bac819525aab:59)

I am trying to load images to a canvas based on url input, i've tried adding event listeners and a logger, none seem to work.

setTimeout(() => {

    let startpanel = document.getElementById('startpanel')

    // image for skin
    var img = document.createElement("img");
    img.style.width = "220px";
    img.style.height = "177px";

    // input custom skin
    var skinInput = document.createElement("input");
    skinInput.placeholder = "skin url";
    skinInput.style.width = "150px";
    skinInput.style.height = "35px";

    skinInput.onblur = function() {
        const newImage = new Image();
        newImage.src = skinInput.value;
        img.src = skinInput.value;
        drawCanvas(newImage);
      };

    startpanel.appendChild(skinInput)

    // draw skin
    var appearance = document.createElement("canvas");
    appearance.id = "appearance";
    // appearance.style.position = "absolute";
    appearance.style.top = "100px";
    appearance.style.width = "200px";
    appearance.style.height = "177px";
    appearance.style.border = "1px solid #d3d3d3";
    startpanel.appendChild(appearance)

    const drawCanvas = (newImage) => {
        var ctx = appearance.getContext("2d");
        ctx.drawImage(newImage, 10, 10);
      }

      drawCanvas();

}, 3000);

• javascript
• canvas

• 3 You are trying to draw the image before it is loaded. Setting .src starts loading the image asynchronously; if you want to draw it you need to set .onload to a function that does so. SO has multiple search results for the error btw. – user5734311 Commented Dec 31, 2018 at 9:09

5 Answers 5

I think this error is thrown because you call your own function "drawCanvas(newImage)" without argument after define it : "drawCanvas()".

So, your function call the context function drawImage with a null first argument : "ctx.drawImage(newImage, 10, 10)"

If you remove the line "drawCanvas()" the error is not thrown.

Make sure the image arugment passed to drawImage() method is not broken. Check its src if pointing to valid image source.

i had the same problem and the firefox, chromium dont show the image png, jpg (images download), i had created an image on my computer with extension png, the images had downloaded show in blank but my own image appears it may be a with the format of the image.

Note: i was woking linux antX distro the file name it doesnt have extension myimage becomes myimage.png.

Sometimes this will work inside the onload method of an image, but not elsewhere. Example:

document.getElementById("imageId").onload = function() {
  var img = document.getElementById("imageId");
  var canvasElement = document.getElementById("canvasId");
  var ctx = canvasElement.getContext("2d");
  ctx.drawImage(img, 0, 0);
}

"I also wrote in this form i remove .src from image.src i put img instead img.src"

ctx.drawImage(img, 0, 0);
img.src = rutaImg;    
ctx.drawImage(img, 0, 0);"