The canvas will disappear when I refresh the 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>
