<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ur friends!</title>
<!-- Boostrap links-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- font-family: 'Montserrat', sans-serif; basic -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<!-- font-family: 'Open Sans', sans-serif; header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Firebase links -->
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
<link rel = "stylesheet" href = "chat.css">
</head>
<body>
<h2 id = "title-name"></h2>
<canvas id = "myCanvas"></canvas>
<br>
<br>
<br>
<div style = "display: flex;" id = "th">
<h2 id = "design">design</h2>
<br>
<br>
<br>
<label>Width:</label>
<input type = "number" id = "width" placeholder="Type in the width" class = "form-control">
<div id = "color">
<button id = "red" class = "square" onclick = "red()"></button>
<button id = "blue" class = "square" onclick = "blue()"></button>
<button id = "green" class = "square" onclick = "green()"></button>
<button id = "black" class = "square" onclick = "black()"></button>
<button id = "pink" class = "square" onclick = "pink()"></button>
<button id = "orange" class = "square" onclick = "orange()"></button>
<button id = "yellow" class = "square" onclick = "yellow()"></button>
<button id = "purple" class = "square" onclick = "purple()"></button>
</div>
</div>
<script src = "chat.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
body {
--bg-secondary:#262626;
--bg-primary: #d4cc3b;
background-color: var(--bg-secondary);
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
body::-webkit-scrollbar {
width: 1.5rem;
}
body::-webkit-scrollbar-track {
background-color: var(--bg-primary);
}
body::-webkit-scrollbar-thumb {
background-color: var(--bg-secondary);
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
#myCanvas {
width: 1000px;
height: 700px;
border: var(--bg-primary) 10px ridge;
background-color: white;
border-radius: 10px;
}
#th {
margin-bottom: 20px;
background-color: var(--bg-primary);
width: 1000px;
height: 150px;
align-items: center;
border-radius: 10px;
}
#width {
width: 300px;
margin-left: 10px;
}
label {
margin-left: 20px;
}
#color {
margin-left: 200px;
}
#design {
font-family: 'Bebas Neue', cursive;
margin-bottom: 100px;
margin-left: 425px;
position: absolute;
color: var(--bg-secondary) !important;
}
.square {
width: 50px;
height: 50px;
border: none;
border-radius: 10px;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
#black {
background-color: black;
}
#pink {
background-color: pink;
}
#orange {
background-color: orange;
}
#yellow {
background-color: yellow;
}
#purple {
background-color: purple;
}
var firebaseConfig = {
apiKey: "AIzaSyCzlBjFMT4KtLmsRr3r8Q9a0I-L6Mpf0BQ",
authDomain: "teamwork-bd9a7.firebaseapp.com",
databaseURL: "https://teamwork-bd9a7-default-rtdb.firebaseio.com",
projectId: "teamwork-bd9a7",
storageBucket: "teamwork-bd9a7.appspot.com",
messagingSenderId: "53158557502",
appId: "1:53158557502:web:131aa36b2266e1c65f9e6f"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig)
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
color = "black";
line_width = 1;
function getData() {
firebase.database().ref("/").on('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
childKey = childSnapshot.key;
Room_names = childKey;
var mouseEvent = "";
var lastPositionX;
var lastPositionY;
canvas.addEventListener("mousdown", my_mouse_down);
function my_mouse_down(e) {
line_width = document.getElementById("width").value;
console.log("down");
mouseEvent = "mouseDown";
}
canvas.addEventListener("mousemove", my_mouse_move);
function my_mouse_move(e) {
currentPosX = e.clientX - canvas.offsetLeft;
currentPosY = e.clientY - canvas.offsetTop;
if(mouseEvent == "mouseDown") {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = line_width;
console.log("Last position of x and y:");
console.log("x- " + lastPositionX + " y- " + lastPositionY);
ctx.moveTo(lastPositionX, lastPositionY);
console.log("Current position of x and y:");
console.log("x- " + currentPosX + " y- " + currentPosY);
ctx.lineTo(currentPosX, currentPosY);
ctx.stroke();
}
lastPositionX = currentPosX;
lastPositionY = currentPosY;
}
canvas.addEventListener("mouseleave", my_mouse_leave);
function my_mouse_leave(e) {
mouseEvent = "mouseLeave";
console.log("leave");
}
canvas.addEventListener("mouseup", my_mouse_up);
function my_mouse_up(e) {
mouseEvent = "mouseUp";
console.log("up");
}
});
})
}
getData();
roomName = localStorage.getItem("roomName");
document.getElementById("title-name").innerHTML = roomName;
function red() {
color = "red";
}
function blue() {
color = "blue";
}
function green() {
color = "green";
}
function black() {
color = "black";
}
function pink() {
color = "pink";
}
function orange() {
color = "orange";
}
function yellow() {
color = "yellow";
}
function purple() {
color = "purple";
}
Hi everyone, I wanted to make a small project on a chatting/teamwork website. I have included firebase and I wanted to make a drawing board so I used canvas. I have used realtime DB to make this successful but it isn’t working. If you could, can you please help me or fix this issue. The output should be you drawing on the canvas and other users could see it. If you want more details please tell me in the comments.