CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
user2602079
user2602079

Reputation: 1403

Trying to display image in an HTML5 canvas

I've tried all code variations that are online. I just want to display an image on a canvas. I've tried code from this site.

window.onLoad=function(){
  function draw(){  
    var ctx = document.getElementById("canvas1").getContext("2d");  
    var img = new Image();  
    img.src = 'images/ball.png';  
    img.onload = function(){  
        ctx.drawImage(img,0,0);  
    };
  };
};

It's not the file path that's a problem, that has been tested without the images folder. There are no errors in the console. Thanks.

Upvotes: 0

Views: 122

Answers (1)

Jan.J
Jan.J

Reputation: 3080

One search in google and there you go with complete jsfiddle example:

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

http://jsfiddle.net/jimrhoskins/Sv87G/

Upvotes: 1

Related Questions