Loading an image onto a canvas with javaScript

Question

I am currently testing using the <canvas> element to draw all of the backgrounds (I will add effects later to these images later and is the reason I'm not using CSS to load the images). That said, I'm currently having difficulty loading a image on to the canvas. Here is the code:

<html>    
<head>    
    <title>Canvas image testing</title>
    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';
                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);
                };
            }                
        }
    </script>
    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>
<body onload="Test1();">    
    <canvas id="canvas" width="1280" height="720"></canvas>      
</body>
</html>

I think that I'm not loading the image correctly, but I'm not sure.

score 34 · Answer 1 · answered Feb 07 '13 at 18:05

There are a few things:

drawimage should be drawImage - note the capital i.
Your getElementById is looking for an element with ID of canvas, but it should be test1. canvas is the tag, not the ID.
Replace the canvas variable (e.g. in your canvas.getContext lines) with ctx, since that's the variable you've used to select your canvas element.
Bind your onload handler before you set the src of the image.

So your function should end up like this:

function Test1() {
    var ctx = document.getElementById('test1');
    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        //Loading of the home test image - img1
        var img1 = new Image();

        //drawing of the test image - img1
        img1.onload = function () {
            //draw background image
            ctx.drawImage(img1, 0, 0);
            //draw a box over the top
            ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 500, 500);

        };

        img1.src = 'img/Home.jpg';
    }
}

freejosh is right - but I just wanted to add that it is not very good style to use the variable `ctx` for the canvas and override it with the context later. You could use `var canvas` for the canvas reference. — Mathias, Feb 07 '13 at 18:10
One question, why do we have to set image source after onload event? — alyssaeliyah, May 29 '15 at 09:23
@AlyssaGono I think [this answer](http://stackoverflow.com/a/14648626/1399979) is a good explanation. — freejosh, May 29 '15 at 15:38

score 32 · Answer 2 · 2018-12-26T19:24:37.973

32

Using newer JavaScript features:

let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);

and the loadImage function looks like this:

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

edited Dec 26 '18 at 19:24

answered Jun 22 '17 at 08:36

1

The first line reports "Uncaught SyntaxError: Unexpected reserved word" – Omiod Oct 17 '20 at 14:11
3

@Omiod You have to enclose this code inside an `async` function. – GirkovArpa Oct 27 '20 at 23:15

score 7 · Answer 3 · answered Feb 07 '13 at 18:07

move the onload event listener to before you set the src for the image.

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
        //draw background image
        ctx.drawImage(img1, 0, 0);
        //draw a box over the top
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
        ctx.fillRect(0, 0, 500, 500);

    };

    img1.src = 'img/Home.jpg';

score 6 · Answer 4 · answered Jul 02 '17 at 05:35

Assign your local file resource (url) to image source and draw image using context from canvas you want to load. That's it. See code bellow.

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}

score 0 · Answer 5 · edited May 04 '22 at 04:26

   var c = document.getElementById("canvas");
   var ctx = c.getContext("2d");
   var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
        //draw background image
        ctx.drawImage(img1, 0, 0);
        //draw a box over the top
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
        ctx.fillRect(0, 0, 500, 500);

    };

    img1.src = 'img/Home.jpg';

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

Loading an image onto a canvas with javaScript

5 Answers5

Linked