Help in collaborative drawing site

[thewebcoder2009]

Body

            color: '#000000',
            isDrawing: false,
            mode: 'brush',
            async draw(event) {
                if(!this.isDrawing) return;
                const canvas = this.$refs.canvas;
                const ctx = canvas.getContext('2d');
                const rect = canvas.getBoundingClientRect();

                ctx.lineWidth = this.mode === 'brush' ? 2 : 15;
                ctx.lineCap = 'round';
                ctx.strokeStyle = this.mode === 'brush' ? this.color : 'white';

                let userx = ''
                let usery = ''

                let ids = JSON.parse(localStorage.getItem("auth"))
                await db.collection("rooms").doc(ids.roomId).collection("users").doc(ids.userId).onSnapshot(snapshot => {
                    if(data) {

                        userx = snapshot.data().x
                        usery = snapshot.data().y
                        // console.log(userx)
                        const x = event.clientX - rect.left;
                        const y = event.clientY - rect.top;
                        ctx.lineTo(userx, usery);
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.moveTo(userx, usery);
                    }
                })

                this.setDrawingData(x, y, this.color)
            },

In this code please someone tell that why it is not working properly I wanted that when multiple users are in a room then each of there drawing is visible. using firebase firestore db.

Guidelines

• I have read and understood this category's guidelines before making this post.

[ItsAnoch]

For a drawing application that supports multiple users, I’d suggest looking into web sockets. They’ll allow for much simpler bi-directional communication.

[thewebcoder2009]

am thinking of that

[kanishk-2]

hey check this:
1.Ensure you correctly update the Firestore with the current drawing coordinates.
2.Listen for changes in the Firestore and update the canvas accordingly.

Also use the correct code-

data() {
return {
color: '#000000',
isDrawing: false,
mode: 'brush',
userId: '', // Store the user ID
roomId: '', // Store the room ID
};
},
mounted() {
// Initialize Firestore listener
this.initializeFirestoreListener();
},
methods: {
async initializeFirestoreListener() {
let ids = JSON.parse(localStorage.getItem("auth"));
this.userId = ids.userId;
this.roomId = ids.roomId;

    await db.collection("rooms").doc(this.roomId).collection("users").onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
            if (change.type === "modified" || change.type === "added") {
                const data = change.doc.data();
                if (data.userId !== this.userId) {
                    // Draw other user's coordinates on the canvas
                    this.drawOnCanvas(data.x, data.y, data.color);
                }
            }
        });
    });
},
drawOnCanvas(x, y, color) {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.lineWidth = this.mode === 'brush' ? 2 : 15;
    ctx.lineCap = 'round';
    ctx.strokeStyle = this.mode === 'brush' ? color : 'white';
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
},
async draw(event) {
    if (!this.isDrawing) return;
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();

    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    ctx.lineWidth = this.mode === 'brush' ? 2 : 15;
    ctx.lineCap = 'round';
    ctx.strokeStyle = this.mode === 'brush' ? this.color : 'white';
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);

    // Update Firestore with the new coordinates
    let ids = JSON.parse(localStorage.getItem("auth"));
    await db.collection("rooms").doc(ids.roomId).collection("users").doc(ids.userId).set({
        userId: ids.userId,
        x: x,
        y: y,
        color: this.color
    }, { merge: true });
},
setDrawingData(x, y, color) {
    // Update drawing data to Firestore (if needed)
}

}

if you liked my ans do accept the ans and react to it.

[thewebcoder2009]

Thanks for this