CODEWITHSUNDEEP
javascripthtmlcanvas
user3496104
user3496104

Reputation: 11

Drawing an image on the canvas in HTML5

I have been trying to get an image drawn on the canvas however have failed to do so. The HTML code simply creates the canvas element "canvas1" with no additional processing.

Here is the JS:

function loadlogo(){
    var logo = new Image();
    var canvas = document.getElementById('canvas1');
    var context = canvas.getContext('2d');
    //resize the canvas to the current window
    context.canvas.width = window.innerWidth;
    context.canvas.height = window.innerHeight / 3;
    logo.src = "images/1.png";
    logo.onload = function() {context.drawImage(logo,0,0;};
    context.shadowOffsetX = 50;
    context.shadowOffsetY = 30;
    context.shadowColor = "pink";
    }

    window.addEventListener("load",loadlogo,false);
    window.addEventListener("resize",loadlogo,false);

Any help you could give would be awesome!!! I have tried this many ways and am stuck.

Thanks, Bryan

Upvotes: 1

Views: 63

Answers (2)

user1693593
user1693593

Reputation:

Change this part

{context.drawImage(logo,0,0;};
                           ^ Notice the missing end-parenthesis here

to

{context.drawImage(logo,0,0)};

I would as QBM5 also recommend to put the src after setting onload to be sure it's properly initialized.

Upvotes: 0

QBM5
QBM5

Reputation: 2788

Put your onload function for img before you assign img src

Upvotes: 1

Related Questions