I have a question and I have been trying everything but just cant crack it. .I have set my HTML5 canvas up to send coordinates, objects etc to a database and then when that canvas is reloaded it (page refresh) it reloads all of the objects with the correct coordinates. .however what I'm trying to achieve is the canvas to update without page refresh every x seconds to show changes etc for example someone else adds something to the canvas everyone will see the change without page refresh so all users are seeing the same thing?
Thanks in advance for any help?
Okay im adding to this post, here is a simple code example of my problem, this all works fine and the var even updated fine when showing in the alert that I have put in however the canvas does now show the changes down below? all the getvars.php file is doing is echo 'Im coming from getvars scripts!';
`<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$(function() {getStatus();});
function getStatus() {
greg = $.ajax({
url: "getvars.php",
async: false
}).responseText;
setTimeout("getStatus()",10000);
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.fillStyle = 'black';
ctx.font = 'italic bold 60px Arial, sans-serif';
ctx.fillText(greg, 50, 50, 300);}
window.alert(greg)
window.onload = draw;}
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>`
is there something I need to add to make the canvas update as the alert is showing the var is updating from the getvars.php when I change it just the canvas stays the same? argh its driving me mad! Thanks in advance for any help you might be able to give?
Put your drawing code inside a .done handler on your jquery ajax call.
When you want your users to be able to collaborate in real-time, you need some way to have real-time communication between the clients and the server.
There are different technologies to achieve this.
One is xmlHttpRequest, also known as AJAX. You could use it to poll the server at regular intervals to check if the other clients drew something, and then repeat their drawing operations on the local canvas.
Another are WebSockets which allow the server to broadcast messages received from one client to the others in real-time.
Both require server-sided programming.