CODEWITHSUNDEEP
htmlhtml5-canvas
user000001
user000001

Reputation: 47

html5 array canvas image trouble

I just want to make a simple slide presentation, but doesn't work. Even I put:

var mycars=new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
alert(mycars[0]);

But it doesn't alert. Can someone help me with the code? What problem

I think the problem is the array obj. Please help!!quick!!thank you all!!!

<html>

<head>
<title></title>

<script language="javascript">
//start from img[0]
var imgNum = 0;
var currentImg = 0;
var img = new Array();
var canvas = document.getElementById('canv');
canvas.width = 500;//document.body.clientWidth
canvas.height = 500;//document.body.clientHeight

var context = canvas.getContext('2d');

function loadImg(){
        alert("loadimg work");
        img[imgNum] = new Image();
        img[imgNum].addEventListener('load', eventLoaded, false);
        img[imgNum].src = String(imgNum)+".jpg";    
}

loadImg();

    function eventLoaded(){
        alert("loaded");
        if(imgNum==0){      
            context.drawImage(img[0], 0, 0);
        }
        imgNum = imgNum+1;
        loadImg();
    }

function clicked(){
    alert('clicked');
    context.clearRect(0, 0, canvas.width, canvas.height);
    var displayImgNum = currentImg+1;
    context.drawImage(img[displayImgNum], 0, 0);
}
</script>
</head>


<body>
<canvas id="canv" onclick="clicked()">Your browser doesn't support HTML5.</canvas>
</body>

</html>

Upvotes: 0

Views: 77

Answers (1)

user2678335
user2678335

Reputation:

please remove

function loadImg(){
        alert("loadimg work");
        img[imgNum] = new Image();
        img[imgNum].addEventListener('load', eventLoaded, false);
        img[imgNum].src = String(imgNum)+".jpg";    
}

loadImg();

Upvotes: 1

Related Questions