How to draw lines on canvas with pixels in real time

Question

   <html>
        <script type="text/javascript">
        var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;

        var x = "black",
            y = 2;

        function init() {
            canvas = document.getElementById('can');
            ctx = canvas.getContext("2d");
            w = canvas.width;
            h = canvas.height;

            canvas.addEventListener("mousemove", function (e) {
                findxy('move', e)
            }, false);
            canvas.addEventListener("mousedown", function (e) {
                findxy('down', e)
            }, false);
            canvas.addEventListener("mouseup", function (e) {
                findxy('up', e)
            }, false);
            canvas.addEventListener("mouseout", function (e) {
                findxy('out', e)
            }, false);
        }

        function color(obj) {
            switch (obj.id) {
                case "green":
                    x = "green";
                    break;
                case "blue":
                    x = "blue";
                    break;
                case "red":
                    x = "red";
                    break;
                case "yellow":
                    x = "yellow";
                    break;
                case "orange":
                    x = "orange";
                    break;
                case "black":
                    x = "black";
                    break;
                case "white":
                    x = "white";
                    break;
            }
            if (x == "white") y = 14;
            else y = 2;

        }

        function draw() {
            ctx.beginPath();
            ctx.moveTo(prevX, prevY);
            ctx.lineTo(currX, currY);
            ctx.strokeStyle = x;
            ctx.lineWidth = y;
            ctx.stroke();
            ctx.closePath();
        }

        function erase() {
            var m = confirm("Want to clear");
            if (m) {
                ctx.clearRect(0, 0, w, h);
                document.getElementById("canvasimg").style.display = "none";
            }
        }

        function save() {
            document.getElementById("canvasimg").style.border = "2px solid";
            var dataURL = canvas.toDataURL();
            document.getElementById("canvasimg").src = dataURL;
            document.getElementById("canvasimg").style.display = "inline";
        }

        function findxy(res, e) {
            if (res == 'down') {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;

                flag = true;
                dot_flag = true;
                if (dot_flag) {
                    ctx.beginPath();
                    ctx.fillStyle = x;
                    ctx.fillRect(currX, currY, 2, 2);
                    ctx.closePath();
                    dot_flag = false;
                }
            }
            if (res == 'up' || res == "out") {
                flag = false;
            }
            if (res == 'move') {
                if (flag) {
                    prevX = currX;
                    prevY = currY;
                    currX = e.clientX - canvas.offsetLeft;
                    currY = e.clientY - canvas.offsetTop;
                    draw();
                }
            }
        }
        </script>
        <body onload="init()">
            <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
            <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
            <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
            <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
            <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
            <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
            <div style="position:absolute;top:20%;left:43%;">Eraser</div>
            <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
            <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
            <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
            <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
        </body>
        </html>

I am developing a drawing app where two users can draw together. I am able to draw on one side, but i am not able how to draw the same line on other's pc with same pixel co-ordinates. This is the code which i am using on client side or say 1 pc

People can't help without seeing what you have tried. Add some code. — TheCarver, Jan 11 '14 at 17:09

markE · Accepted Answer · 2014-01-11T20:15:16.650

You question appears to be:

"How can I draw the same lines from the first computer on a different computer?"

First: Save

Save each new line segment into a format that can be transmitted over the internet--like JSON.

JSON.stringify takes a javascript object and converts it into a string format that can be transmitted through the internet. On the receiving side, JSON.parse converts the string back into a javascript object that you can use in your code.

var segment = {
    startX:prevX, 
    startY:prevY, 
    endX:currX, 
    endY:currY, 
    color:x, 
    linewidth:y
};

var segmentJSON = JSON.stringify(segment);

Second: Send

Send your JSON string to the other computer. You give no information about how your 2 computers are connected, but one suggestion would be to use websockets for commumication. Websockets allow a continuous communication between 2+ computers using an intermediate server. One program (among many) implementing websockets is SocketIO:

http://socket.io/

Third: Receive and Replay

After receiving the JSON on the second computer, "replay" the drawing command.

var segment = JSON.parse(segmentJSON);

drawFromOtherComputer(segment);

function drawFromOtherComputer(segment) {
    ctx.beginPath();
    ctx.moveTo(segment.startingX, segment.startingY);
    ctx.lineTo(segment.endingX, segment.endingY);
    ctx.strokeStyle = segment.color;
    ctx.lineWidth = segment.linewidth;
    ctx.stroke();
}

i have used the above code, but i am new to node.js and html5 . This is the final code i am using http://stackoverflow.com/questions/21199967/how-can-i-draw-the-same-lines-from-the-first-computer-on-a-different-computer but it isn't working. Pls help markE — anujspoddar, Jan 19 '14 at 12:49
Debugging nodeJS + SocketIO is beyond the scope of a Stackoverflow question, but I did take a quick look. In server.js you need to emit to all listening sockets, not just to the submitting socket. In index.html your socket.on(“serverdrawcanvas” does not belong inside your draw function. Ideally, when you receive drawing commands from other computers, you should use the same draw() function used to draw locally instead of a separate drawFromOtherComputer function (code DRY). That's my quick look. Good luck with your project! — markE, Jan 20 '14 at 05:10

How to draw lines on canvas with pixels in real time

1 Answers1