Canvas disappear on ajax call

The canvas will disappear when refresh data with ajax…

This is my canvas script

<script language="javascript" type="text/javascript" defer>

// Global variable
var img = null,
needle = null,
ctx = null,
degrees = 0;

//alert("I am an alert box!");

function clearCanvas() {
 // clear canvas
// ctx.clearRect(0, 0, 200, 200);
ctx.clearRect(0, 0, 320, 320);
}

function draw() {

clearCanvas();

// Draw the compass onto the canvas
ctx.drawImage(img, 0, 0);

// Save the current drawing state
ctx.save();

// Now move across and down half the 
//  ctx.translate(100, 100);
ctx.translate(160, 160);

// Rotate around this point
ctx.rotate(degrees * (Math.PI / 180));

degrees = <?php echo round($windDirDeg,0);?>

// Draw the image back and up
//ctx.drawImage(needle, -100, -100);
ctx.drawImage(needle, -160, -160);

// Restore the previous drawing state
ctx.restore();

// Increment the angle of the needle by 5 degrees
// Increase by 5 only if you want continuous rotation
// put 0 if you don't want to rotate
degrees += 0;
}

function imgLoaded() {
// Image loaded event complete.  Start the timer
//setInterval(draw, 100);
setInterval(draw, 160);
}

function init() {
// Grab the compass element
var canvas = document.getElementById('Compass');


// Canvas supported?
if (canvas.getContext('2d')) {
    ctx = canvas.getContext('2d');

    // Load the needle image
    needle = new Image();
    needle.src = <?php echo "'image/Arrow.$colSkin.png'";?>;

    // Load the compass image
    img = new Image();
    img.src = 'image/compass1.png';
    img.onload = imgLoaded;
 } else {
    alert("Canvas not supported!");
 }
}

 </script>

this is my ajax script

<script type="text/javascript">
function Ajax(){
    var xmlHttp;
        try{    
            xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
            }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){
                    alert("No AJAX!?");
                    return false;
                }
            }
        }

    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
            setTimeout('Ajax()',3000);
        }
    }
    xmlHttp.open("GET","Home.php",true);
    xmlHttp.send(null);
    }

    window.onload=function(){
        setTimeout('Ajax()',3000);
    }

</script>

And this is my html code

//run the ajax<div id = "ReloadThis">
                <body onLoad="init();">
                <canvas id="Compass" width="320" height="320"></canvas>//display the canvas 
            </body>
      </div>

THANK YOU SO MUCH….
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


Source: javascript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.