html javascript code not loaded properly

Question

function drawimage()
{
var f=document.getElementById("myCanvas");
    var cxt1=f.getContext("2d");
    var img1=new Image();
    img1.src="image.jpg";
    cxt1.drawImage(img1,0,0,750,400);
}

<canvas id="myCanvas" width="1125" height="600" style="border:1px solid #c3c3c3;">
</canvas>
<script type="text/javascript">

drawimage().

This is my javascript but when I am running this on browser, only border comes the 1st time and image appears only after refreshing the page. What is the problem with the code?

Pointy · Accepted Answer · 2010-11-26 21:41:01Z

1

Try doing the image drawing in a "load" handler:

var img1=new Image();
img1.src="image.jpg";
img1.onload = function() {
  cxt1.drawImage(img1,0,0,750,400);
};

answered Nov 26, 2010 at 21:41

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

4 Comments

sahil Over a year ago

is there same code for drawing lines also. On my page lines are sometimes drawn and sometimes after refresh.

Pointy Over a year ago

Uhh ... lines? I don't know what you mean.

sahil Over a year ago

when i try to draw lines, sometimes they are drawn and some not

Pointy Over a year ago

That sounds like something you should post as a different question.

gre · Accepted Answer · 2010-11-26 22:14:43Z

0

the img1.src line MUST be after the onload because if the browser is fast enough (+ maybe image is cached or it's localhost), the image will be loaded just after img1.src is setted. In this case, the onload will not be called.

var img1=new Image();
img1.onload = function() {
  cxt1.drawImage(img1,0,0,750,400);
};
img1.src="image.jpg";

answered Nov 26, 2010 at 22:14

gre

1,8412 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

html javascript code not loaded properly

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related