adding images to a html5 canvas

Question

I'm trying to add an image to my canvas but it doesn't seem to work I've taken a look and can't see anything wrong with my code but maybe someone else can.

This is my JS file.

if (window.addEventListener) 
{
    window.addEventListener( 'load', onLoad, false);
}

function onLoad()
{
var canvas;
var context;

function initialise() 
{
    canvas = document.getElementById('canvas'); 

    if (!canvas.getContext)
    { 
        alert('Error: no canvas.getContext!'); 
        return; 
    }

    context = canvas.getContext('2d'); 
    if (!context)
    { 
        alert('Error: failed to getContext!'); 
        return; 
    }

}
}

function draw()
{
    var sun = new Image();
    sun.src = 'images.sun.png';
    context.drawImage(sun, 100, 100);
}

onLoad();
draw();

Here's my HTML mabye this will help find the problem

<!doctype html>
    <html>
        <head>
            <title>Test</title> <script type="text/javascript" src="javascript/canvas.js"></script>
        </head>
        <body>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas tag
            </canvas>

        </body>
    </html>

andy · Accepted Answer · 2012-12-09 22:23:08Z

1

the problem is, that you declare canvas & context in onLoad() but try to access it in draw().

so, by making them global, the problem is solved:

var canvas;
var context;

if (window.addEventListener) {
    window.addEventListener('load', function(){
        onLoad();
    }, false);
}

function onLoad() {
    initialise();
    draw();
}

function initialise() {
    canvas = document.getElementById('canvas');

    if (!canvas.getContext) {
        alert('Error: no canvas.getContext!');
        return;
    }

    context = canvas.getContext('2d');
    if (!context) {
        alert('Error: failed to getContext!');
        return;
    }

}

function draw() {
    var sun = new Image();
    sun.addEventListener('load', function(){
        context.drawImage(sun, 100, 100);
    }, false);
    sun.src = 'http://puu.sh/1yKaY';
}

edited Dec 9, 2012 at 22:23

answered Dec 9, 2012 at 9:48

andy

1321 silver badge10 bronze badges

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

6 Comments

Nigel Brook Over a year ago

I get the same error Uncaught TypeError: Cannot call method 'drawImage' of undefined

andy Over a year ago

and you have a <canvas id="canvas" width=200" height="200"></canvas> or something like that in your body?

Nigel Brook Over a year ago

yea I'll add my HTML to the question but I'm pretty sure its all right

andy Over a year ago

works for me? did you copy my complete JS into your canvas.js?

Jeff Over a year ago

@partofweb Hi, consider adding a description of how the answer solves the problem as well as the code, to help future users of SO :)

|

Nikola Ninkovic · Accepted Answer · 2012-12-09 09:36:37Z

0

Try to draw image on it's onload event

 sun.onload = function() {
    context.drawImage(sun, 100, 100);
 };

answered Dec 9, 2012 at 9:36

Nikola Ninkovic

1,2622 gold badges12 silver badges27 bronze badges

1 Comment

Nigel Brook Over a year ago

when i tried this chrome debugger game me this error Uncaught TypeError: Cannot call method 'drawImage' of undefined

Collectives™ on Stack Overflow

adding images to a html5 canvas

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related