Javascript not loading image object from array onto canvas

Question

I've been reading through (and trying) everything i can find on this subject, without luck. My goal is to load all image sources from arr_images into an array containing the image objects, and then, drawing a specific image onto the canvas.

Any help is much appreciated! Thanks in advance.

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/enginev2.js"></script>
</head>
<body>
<canvas id="main" width="1000" height="500"></canvas>
</body>
</html>

enginev2.js

var arr_images = ["images/player.jpg"];
var obj_images = [];

$.each(arr_images, function(key, image) {
    var img = new Image();
    img.src = image;
    obj_images.push(img);
});

var c = document.getElementById("main");
var ctx = c.getContext("2d");

$(document).ready(function() {
    ctx.drawImage(obj_images[0], 0, 0, 100, 100);
});

Mr_Pouet · Accepted Answer · 2015-12-06 18:30:02Z

2

My guess right now is that your image isn't properly loaded when you try to draw it (the document is probably ready before the image is fully loaded).

Try calling your ctx.drawImage function using a function callback on your img object:

img.onload = drawImage;  // calls ctx.drawImage

answered Dec 6, 2015 at 18:30

Mr_Pouet

4,3108 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5306544 · Accepted Answer · 2015-12-06 18:38:17Z

0

var arr_images = ["images/player.jpg"];
var obj_images = [];

$.each(arr_images, function(key, image) {
    var img = new Image();
    img.src = image;
    obj_images.push(img);
    img.onload = function() {
        ctx.drawImage(obj_images[0], 0, 0, 100, 100);
    }
});

var c = document.getElementById("main");
var ctx = c.getContext("2d");

answered Dec 6, 2015 at 18:38

user5306544

Collectives™ on Stack Overflow

Javascript not loading image object from array onto canvas

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related