How to draw image on 3d canvas using javascript

Question

I have this

function doFirst(){
    var x = document.getElementById('canvas'); 
    var canvas = x.getContext('webgl') || x.getContext("experimental-webgl");
 }

And I want to draw a image 'sheep.png' on the canvas. I use this but it is not working:

var pic = new Image();
pic.src = "images/sheep.png";
pic.addEventListener("load", function() { canvas.drawImage(pic,0,0,0)}, false);

Answer 1

drawImage is only for use with the 2D context, you can't use it in a webgl context.

In order to use it in webgl, you'll need to build a mesh with your image used as the texture.

If you're not familiar with webgl, you might want to look at three.js as an alternative that's easier to use.

Answer 2

drawImage()

takes only 3 arguments I guess.

See this demo .

and this reference