I want to add image in javascript

Question

i want to add image using javascript but it is not working

html code:

<body onload="init()">
    <canvas id="canvas" width="640" height="480">
        <p>your browser doesnot support html5 canvas.</p>
    </canvas>
    <script src="script.js">
    </script>
</body>

and this is javascript:

var canvas;
var context;

function init() {
    canvas = document.getElementById("canvas")
    context = canvas.getContext("2d");
    console.log("loading comepletd");
    var image = new Image();
    image.src = "ball.png";
}

What exactly are you expecting to happen? You're creating an instance of an image but you aren't doing anything with it. — Mike Cluck, Aug 29 '16 at 14:41
you forgot a semi-colon after the getElementById() And you can you the JS console to debug your code ;) (F12) — Pierre, Aug 29 '16 at 14:42
i want to show this image in my browser. That's all i want to do! — suzan, Aug 29 '16 at 14:43
The phrase: "Not working" is going to invite downvotes. We are not mind-readers. Tell us what you expected to happen and what actually happened. — Eric Leschinski, Aug 29 '16 at 14:43
@Pierre Technically the semicolon isn't required but it's definitely a good idea to be consistent. — Mike Cluck, Aug 29 '16 at 14:43
@suzan If all you want is to show an image in your browser then you can just do `` but based on your code, it looks like you're trying to make a game or animation. — Mike Cluck, Aug 29 '16 at 14:44
Duplicates: http://stackoverflow.com/questions/14757659/loading-an-image-onto-a-canvas-with-javascript - http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas — mplungjan, Aug 29 '16 at 14:47
@Mike C i want to show image as well as do some coding on that image like movement and stuff does tag work for that — suzan, Aug 29 '16 at 14:50
@suzan Yes and no. Look at the links posted by mplungjan. They'll get you started. — Mike Cluck, Aug 29 '16 at 14:51
You will have a lot of learning, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement — Teemu, Aug 29 '16 at 14:55
thanks @Teemu i have solved my problem! and thanks all of you who help me to solve my problem. — suzan, Aug 29 '16 at 15:03

KANAYO AUGUSTIN UG · Accepted Answer · 2016-08-29T14:52:36.217

0

Try this

var canvas;
var context;

function init() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    console.log("loading comepletd");
    var image = new Image();
    image.src = "ball.png";
    image.onload = function(){
        context.drawImage(image, 100, 100);
    }
}

edited Aug 29 '16 at 14:52

answered Aug 29 '16 at 14:47

KANAYO AUGUSTIN UG

1,877
1
14
27

http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas – mplungjan Aug 29 '16 at 14:49
Please delete your answer instead of copying the code from the link I posted – mplungjan Aug 29 '16 at 14:58
@kanayo austin kane this worked for me! – suzan Aug 29 '16 at 15:04
@suzan. Am happy it worked. Please mark it as answered and don't forget to upvote – KANAYO AUGUSTIN UG Aug 29 '16 at 17:29
i am new at stackoverflow so i don't know so much about marking etc,etc – suzan Aug 30 '16 at 06:00
Lol, @suzan but you have done that already – KANAYO AUGUSTIN UG Aug 30 '16 at 14:25
You can upvote by clicking the triangle above the number – KANAYO AUGUSTIN UG Aug 30 '16 at 14:27
Now i know about marking the correct answer and upvote – suzan Aug 31 '16 at 07:13
Lol... But you haven't upvoted my answer – KANAYO AUGUSTIN UG Aug 31 '16 at 07:35

I want to add image in javascript

1 Answers1