CODEWITHSUNDEEP
javascripthtmlcanvas
dee Five
dee Five

Reputation: 291

Loading an image onto a canvas with javaScript

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.

Upvotes: 29

Views: 118610

Answers (5)

user993683
user993683

Reputation:

Using newer JavaScript features:

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

and the loadImage function looks like this:

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

Upvotes: 32

Juanfer
Juanfer

Reputation: 11

   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>

Upvotes: 1

Yohanes AI
Yohanes AI

Reputation: 3621

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);
  }
}

Upvotes: 6

Iwan
Iwan

Reputation: 181

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';

Upvotes: 7

freejosh
freejosh

Reputation: 11383

There are a few things:

  1. drawimage should be drawImage - note the capital i.
  2. Your getElementById is looking for an element with ID of canvas, but it should be test1. canvas is the tag, not the ID.
  3. 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.
  4. 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';
    }
}

Upvotes: 37

Related Questions