I have a task to create social network
I have a home page that displays all drawings created by users via canvas. Users can draw on their own drawing and can add contributors which have righ to draw on their drawing also. The thing is they can both draw in the same time somehow.
The thing i want to do is, that when one user draws the canvas image, it is updating for other user who is watching that same drawing without refreshing the page.
I want to note that program works well, the only problem is that you have to refresh the page to see changes of drawing
Here is my client side code where i add previously drawed picture to empty canvas before new drawing
canvas = document.getElementById('can');
contain = document.getElementById('contain');
ctx = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = ''+drugi+'/'+prvi+'.png';
imageObj.onload = function() {
ctx.drawImage(this, 0, 0);
};
Here is the request to ajax to save drawing after every start of the draw() function (which is everytime you move your mouse while drawing on canvas)
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
var dataURL = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'saveimg.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(dataURL );
This is server side code
<?php
session_start();
$crtez = $_SESSION['tmpdrawing'];
$kategorija = $_SESSION['tmpkat'];
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen($kategorija . '/' . $crtez . '.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
?>
Now when we have a code, actual thing i want is the first code, which changes canvas appearance to be launched for example in every 3 seconds, so the other users currently on that drawing can see the picture updating without refreshing page.
If you need more code in client side i will post.
I want to say again that the program works perfectyl, the only thing i need to finish it is auto updating canvas via ajax