Collaborative Whiteboard (Canvas) circle on websocket (socket.io)

Question

i'm trying to do some collaborative (online) whiteboard app with html5 canvas, nodejs and websockets(socket.io), my process is going well, but i want to draw circles. actually i can draw lines and (for example) i think the circle just like the line,starting point of line must be center of circle,distane between starting and endding points of line must bi radius of circle. But i can not convert that idea to code. :(

My client side code for draw func.

function draw(data, fromMe){
        if(DP.thisObj[data.id]){
            var eventType = _eventTypes(data.isTouchDevice),
            ctx = DP.thisObj[data.id].ctx,
            scratchCtx = DP.thisObj.scratch.ctx;

            //set the ctx
            ctx.strokeStyle = data.color;
            ctx.lineWidth = data.stroke;
            ctx.lineCap = "round";
            ctx.lineJoin = "round";

            scratchCtx.strokeStyle = data.color;
            scratchCtx.lineWidth = data.stroke;
            scratchCtx.lineCap = "round";
            scratchCtx.lineJoin = "round";

            if(data.isErase){
                ctx.globalCompositeOperation = "destination-out";
                scratchCtx.globalCompositeOperation = "destination-out";
            } else {
                ctx.globalCompositeOperation = "source-over";
                scratchCtx.globalCompositeOperation = "source-over";
            }


            if (data.type === eventType.down) {     
                DP.okToDraw = true;
                if(fromMe && !data.isLineDrawing){
                    DP.points.push({x : data.x, y : data.y});
                } else if(data.isLineDrawing) { //for line drawing we only need the coords
                    DP.thisObj[data.id].x = data.x;
                    DP.thisObj[data.id].y = data.y;
                } else { //from a shared canvas
                    ctx.beginPath();
                    ctx.moveTo(data.x, data.y);
                }
            } else if ((data.type === eventType.move) && DP.okToDraw) {


                if(data.isLineDrawing && fromMe) {  //draw the line on a temp canvas
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                    scratchCtx.beginPath();
                    scratchCtx.moveTo(DP.thisObj[data.id].x, DP.thisObj[data.id].y);
                    scratchCtx.lineTo(data.x, data.y);
                    scratchCtx.stroke();
                } else if(fromMe){
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height); 
                    DP.points.push({x : data.x, y : data.y});
                    _drawPoints(scratchCtx);
                } else if(!data.isLineDrawing) { //this is coming from drawing a shared canvas
                    ctx.lineTo(data.x, data.y);
                    ctx.stroke();
                }
            } else if(data.type === eventType.up){
                if(data.isLineDrawing) {    //when done put the scratch line on the scratch canvas
                    ctx.beginPath();
                    ctx.moveTo(DP.thisObj[data.id].x, DP.thisObj[data.id].y);
                    ctx.lineTo(data.x, data.y);
                    ctx.stroke();
                    ctx.closePath();
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                } else if(fromMe){  
                    ctx.drawImage(DP.scratchCanvas, 0, 0);
                    scratchCtx.clearRect(0, 0, DP.myCanvas.width, DP.myCanvas.height);
                } else {
                    ctx.closePath();
                }
                DP.okToDraw = false;
                scratchCtx.closePath();

                DP.points = [];
            }
        }

    }

and here is the server side code for drawing func. server.js

(function () {
    var connectedClients = {}, //used to keep a working list of the connections
        io = require('socket.io').listen(4000);

    io.sockets.on('connection', function (socket) {


        //drawing data
        socket.on('drawRequest', function (data) {
            socket.broadcast.emit('draw', {
                x: data.x,
                y: data.y,
                type: data.type,
                isTouchDevice : data.isTouchDevice,
                color: data.color,
                stroke: data.stroke,
                isLineDrawing: data.isLineDrawing,
                isErase: data.isErase,
                id: data.id
            });
        });

    });
}).call(this);

Answer 1

You need an arc

arc(x, y, radius, startAngle, endAngle, anticlockwise)

DMO

var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();