NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]

Question

NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]

I used the following code to save the div content as imgae:

function saveDiv() {
    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");
    var mydiv = $(".mydivclass").html();

    var data = "data:image/svg+xml," +

    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +

    "<foreignObject width='100%' height='100%'>" +

    mydiv +

    "</foreignObject>" +

    "</svg>";

    var img = new Image();

    img.src = data;

    img.onload = function () {
        ctx.drawImage(img, 0, 0);
    }
}

am getting the following when i call the function:

NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]

What am doing wrong?

jquery

image

html

canvas

asked on Stack Overflow Aug 29, 2013 by

ashu • edited Aug 29, 2013 by

Arturs

1 Answer

On Iceweasel 17.0.10 I have a similar issue like yours. This is the code that I used. My code is almost identical to this: http://www.w3schools.com/tags/canvas_drawimage.asp

<style>
#canvasbg {
    background:url('image.jpg')
}
</style>
</head><body>
<div id="canvasbg"><br></div>
<canvas></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var img = document.getElementById('canvasbg');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
</script>

I also get the error:

NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] @ file:///home/tijs/Development/html/js/canvas.js:35

Edit: FIXED! The problem is that the image isn't loaded yet before you attempt to use it. Try this:

var img = new Image();
img.onload = function () {
    this._canvas.drawImage(img, 300, 300);// this is line 14
};
img.src = "images/logo.jpg";

Credits go to Ian: NS_ERROR_NOT_AVAILABLE: Component is not available

answered on Stack Overflow Dec 7, 2013 by

Tijs Maas • edited May 23, 2017 by

Community

User contributions licensed under CC BY-SA 3.0