You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.9 KiB
HTML
86 lines
3.9 KiB
HTML
<head>
|
|
<title>drawing</title>
|
|
<style>
|
|
.center{
|
|
text-align: center;
|
|
}
|
|
|
|
#drawing{
|
|
border: 1px solid #000;
|
|
box-shadow: 0px 0px 10px #000;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="center">drawing editor</h1>
|
|
<canvas id="drawing" width="400" height="400"></canvas><br><!--canvas is the field in that javascript will draw -->
|
|
Stroke width: <input type="range" min="0.5" max="50" value="1" id="width"><br>
|
|
Color: <input type="color" id="color">
|
|
Brush: <select id="linecap">
|
|
<option value="square">square</option>
|
|
<option value="round">round</option>
|
|
<option value="butt">butt</option>
|
|
</select>
|
|
</body>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
var socket = io(); //starts socket.io
|
|
|
|
|
|
var lineWidth = 1; //defautl lineWidt
|
|
var color = "#000000"; //default color
|
|
var brush = "square"; //default linecap
|
|
document.getElementById("linecap").addEventListener('change', function(){ //add event listener for the select field with the id "linecap". if it changes the value it it will trigger this function
|
|
brush = this.value; //save value in variable brush
|
|
});
|
|
document.getElementById("color").addEventListener('change', function(){ //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function
|
|
color = this.value; //save value in variable color
|
|
});
|
|
document.getElementById("width").addEventListener('change', function(){ //add event listener for the input field with the id "linecap". if it changes the value it it will trigger this function
|
|
lineWidth = this.value; //save value in variable lineWidht
|
|
});
|
|
|
|
var canvas = document.getElementById("drawing"); //get the canvas element of the html document
|
|
var ctx = canvas.getContext('2d'); //get its pixel field in ctx variable
|
|
var pos = {x: 0, y: 0}; //pos variables
|
|
|
|
document.addEventListener('mousemove', draw); //add event listener for mouse movement. if it the mouse moves it will trigger function "draw"
|
|
document.addEventListener('mousedown', setPosition); //add event listener for mouse buttons if the are pressed down. if it a mouse button is pressed it will trigger function "setPosition"
|
|
|
|
function setPosition(e){
|
|
pos.x = e.clientX - canvas.offsetLeft; //e.clientX is the current mouse X position. canvas.offsetLeft is the canvas position form Left side. this calculation is necessary to really draw in mouse position
|
|
pos.y = e.clientY - canvas.offsetTop; //e.clientY is the current mouse Y position. canvas.offsetTop is the canvas position from the Top
|
|
}
|
|
|
|
function draw(e){
|
|
if(e.buttons !== 1) return; //check if left mouse button is pressed otherwise stop function ("return")
|
|
ctx.lineWidth = lineWidth; //change the lineWidth
|
|
ctx.lineCap = brush; //change the lineCap
|
|
ctx.strokeStyle = color; //change the strokeStyle(color)
|
|
ctx.beginPath(); //begin the line
|
|
ctx.moveTo(pos.x,pos.y); // start point of the line
|
|
var startPos = {x: pos.x, y: pos.y}; //save the start point in variable startPos
|
|
setPosition(e); //get the new mouse position (it will be saved in pos.x and pos.y --> see function setPosition
|
|
ctx.lineTo(pos.x,pos.y); //draw line to new mouse position
|
|
ctx.stroke(); //this is the moment where the actual line is drawn
|
|
socket.emit("picture", { //send data to the server
|
|
startPos,
|
|
pos,
|
|
color,
|
|
lineWidth
|
|
});
|
|
}
|
|
|
|
socket.on("dingdong", (line) => { //browser received data from the server(other browser has drawn a line
|
|
console.log(line);
|
|
ctx.lineWidth = line.lineWidth;
|
|
ctx.strokeStyle = line.color;
|
|
ctx.beginPath();
|
|
ctx.moveTo(line.startPos.x, line.startPos.y);
|
|
ctx.lineTo(line.pos.x, line.pos.y);
|
|
ctx.stroke();
|
|
});
|
|
|
|
</script>
|