自动刷新画布元素以绘制数据

Question

我有代码可以从phpmyadmin数据库自动获取数据，并将其显示在网页上，这是在第一个脚本标签上完成的。下一步将已获取的数据转换为正确的格式以进行绘图。最后一个脚本标签中的draw函数是需要每1-2秒重复一次的函数，但是我无法重复该函数。 谁能建议一些代码或教程。

<script type="text/javascript"> //this automaticall gets the data
		
		$(document).ready(function() {
			setInterval(function(){
				$('#show').load('load.php');
			}, 3000);
		});

	</script>

	<script type="text/javascript"> //this converts to the correct format
			var xcoor = <?php echo json_encode($xcoordinate); ?>;
			var ycoor = <?php echo json_encode($ycoordinate); ?>;
			var xlength = xcoor.length
	</script>

	<canvas id="tutorial" width="500" height="500"></canvas>


  
	<script type="text/javascript">
      		function draw() {
	        var canvas = document.getElementById('tutorial');
	        if (canvas.getContext) {
	          var ctx = canvas.getContext('2d');

	    		var bw = 400;
				// Box height
				var bh = 400;
				// Padding
				var p = 0;
				var boxsize = 5;

				ctx.beginPath();
				for (var x = 0; x <= bw; x += boxsize) {
				    ctx.moveTo(0.5 + x + p, p);
				    ctx.lineTo(0.5 + x + p, bh + p);
			    }

			    for (var x = 0; x <= bh; x += boxsize) {
			        ctx.moveTo(p, 0.5 + x + p);
			        ctx.lineTo(bw + p, 0.5 + x + p);
			 	}


        //this plots the data
			 	var xlength1 = xlength - 3;
			    for (var x = 0; x<= xlength; x+=1){
			    	ctx.fillRect((xcoor[x]*20),(x*10),5,5);
			    	if (x > xlength1){
			    		ctx.fillStyle = 'red';
			    	}
			 	

			    ctx.stroke();
				}
	        }
	    }
	    draw();
    </script>