I am creating a small drawing app using canvas and node.js. Lets say there are many users connected to my app - user A, user B etc.
When user A draws anything on the canvas I want to let other users know that user A has drawn something by outputting the drawing on the canvas of the other users.
What I have achieved is by attaching a click event on the canvas element. And it works, but the problem is that it works only when user has completed the drawing in one click. I want the drawing to be shared to the other users in runtime like pixel by pixel change. Is there any event for canvas like .canvaschange() ?
My code for the click event is -
$("#imageTemp").click(function(){
var can = document.getElementById("imageView");
var img = can.toDataURL("image/png");
socket.emit('emit_draw', img, function (data){
console.log('Emit Broadcast draw', data);
});
});
Any reason why you're not emitting drawing messages whereever you are calling the actual drawing primitives? It's the drawing stuff you want to share, not the clicks? You could even do your own drawing based on the same kind of messages (listen for the same messages locally and only draw based on those messages).
And another thing you probably want to do to avoid excessive network traffic; capture the drawing events into some kind of queue, and only emit (over the network) messages when there's been at least 1 second (or whatever) since the last addition to the queue was received.
I want to just confirm did you use
at client side
$("#imageTemp").click(function(){
var can = document.getElementById("imageView");
var img = can.toDataURL("image/png");
socket.emit('emit_draw', img);
});
at server side
io.sockets.on('connection', function (socket) {
socket.on('emit_draw',function(img){
socketioId = socket.id;
socket.broadcast.emit('drawed',socketioId,img);
});
and at client side save each users's socket id and also include
socket.on('drawed',function(friendId,img){
// handle your picture
});