Witam, moim problemem jest to, że chciałbym napisać funkcje, która rysuje kwadrat (tak jak w paint'cie) oraz funkcje która będzie dodawać tekst, tzn. wpisywać go w pole. Chcę stworzyć prostego paint'a, ale moje próby łączenia wszystkich funkcji, by prawidłowo działały, kończą się klęską. Proszę o pomo
<!DOCTYPE html>
<html>
<head>
<title>Paint</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="toolbar">
<div id="colors">Kolor: <input type="color" value="#ffff00" name="myColor" id="myColor"></div>
<div id="range">Rozmiar: 1<input type="range" id="myRange" value="5" min="1" max="100">100</div>
<button id="brush"><img src="images/brush.png"></button>
<button id="erase"><img src="images/eraser.png"></button>
<button id="rectangle"><img src="images/rectangle.png"></button>
<button id="text"><img src="images/text.png"></button>
<a href="" id="saveLink"><button id="save">Zapisz</button></a>
<button id="reset">Reset</button>
<br>
</div>
<canvas id="canvas">Twoja przeglądarka nie wspiera canvas. Zaktualizuj ją !</canvas>
<script>
//Inicjalizacja okna canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = false;
ctx.lineJoin = "round";
ctx.lineCap = "round";
var positionX, positionY;
//Pobieranie id przyciskow
var brush = document.getElementById("brush");
var eraser = document.getElementById("erase");
var rectangle = document.getElementById("rectangle");
var text = document.getElementById("text");
var color = document.getElementById("myColor");
var size = document.getElementById("myRange");
var reset = document.getElementById("reset");
var saveLink = document.getElementById("saveLink");
//Kolor
var myColor = color.value;
ctx.strokeStyle = myColor;
//Rysowanie
var mySize = size.value;
ctx.lineWidth = mySize;
brush.style.border = "2px solid red";
canvas.style.cursor = "pointer";
canvas.addEventListener("mousedown", brushDown, false);
canvas.addEventListener("mousemove", brushMove, false);
canvas.addEventListener("mouseup", brushUp, false);
//Wybor koloru
function colorChange() {
myColor = color.value;
ctx.strokeStyle = myColor;
}
//Wybor rozmiaru
function sizeChange() {
mySize = size.value;
ctx.lineWidth = mySize;
}
//Praca pedzla
function getCoordinates(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
function brushDraw(canvas, positionX, positionY) {
if (mouse) {
ctx.lineTo(positionX, positionY);
ctx.stroke();
canvas.style.cursor = "pointer";
}
}
function brushDown(e) {
mouse = true;
var coordinates = getCoordinates(canvas, e);
canvas.style.cursor = "pointer";
positionX = coordinates.x;
positionY = coordinates.y;
ctx.beginPath();
ctx.moveTo(positionX, positionY);
ctx.lineTo(positionX, positionY);
ctx.stroke();
}
function brushMove(e) {
var coordinates = getCoordinates(canvas, e);
positionX = coordinates.x;
positionY = coordinates.y;
brushDraw(canvas, positionX, positionY);
}
function brushUp() {
mouse = false;
canvas.style.cursor = "default";
}
function brushClick() {
var brushColor = document.getElementById("myColor");
ctx.strokeStyle = brushColor.value;
brush.style.border = "2px solid red";
eraser.style.border = "none";
rectangle.style.border = "none";
text.style.border = "none";
canvas.addEventListener("mousedown", brushDown, false);
canvas.addEventListener("mousemove", brushMove, false);
canvas.addEventListener("mouseup", brushUp, false);
}
//Praca gumki
function eraserClick() {
ctx.strokeStyle = "white";
eraser.style.border = "2px solid red";
brush.style.border = "none";
rectangle.style.border = "none";
text.style.border = "none";
canvas.addEventListener("mousedown", brushDown, false);
canvas.addEventListener("mousemove", brushMove, false);
canvas.addEventListener("mouseup", brushUp, false);
}
//Reset okna
function resetClick() {
window.location.reload();
}
//Zapisywanie
function saveClick() {
var data = canvas.toDataURL();
console.log(data);
saveLink.href = data;
saveLink.download = "myImage.png";
}
//Text
function Text() {
text.style.border = "2px solid red";
rectangle.style.border = "none";
eraser.style.border = "none";
brush.style.border = "none";
canvas.addEventListener("mousedown", brushDown, false);
canvas.addEventListener("mousemove", brushMove, false);
canvas.addEventListener("mouseup", brushUp, false);
}
//figura
function changerectangle() {
rectangle.style.border = "2px solid red";
text.style.border = "none";
eraser.style.border = "none";
brush.style.border = "none";
canvas.addEventListener("mousedown", brushDown, false);
canvas.addEventListener("mousemove", brushMove, false);
canvas.addEventListener("mouseup", brushUp, false);
}
brush.addEventListener("click", brushClick);
eraser.addEventListener("click", eraserClick);
rectangle.addEventListener('click', changerectangle);
text.addEventListener('click', Text);
color.addEventListener("change", colorChange);
size.addEventListener("change", sizeChange);
reset.addEventListener("click", resetClick);
saveLink.addEventListener("click", saveClick);
</script>
</body>
</html>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
margin: 0;
}
canvas {
display: block;
}
#toolbar {
width: 100%;
padding: 10px;
position: absolute;
top: 0;
background-color: #2e0909;
overflow: auto;
}
#colors {
position: relative;
float: left;
margin-left: 20px;
margin-right: 20px;
font-size: 20px;
font-weight: 500;
font-family: Verdana;
color: white;
white-space: nowrap;
}
#range {
position: relative;
float: left;
font-size: 20px;
font-weight: 500;
font-family: Verdana;
color: white;
white-space: nowrap;
margin-right: 20px;
}
#myColor,
#myRange {
cursor: pointer;
}
#brush,
#erase {
position: relative;
float: left;
height: 30px;
width: 40px;
background-color: white;
text-align: center;
cursor: pointer;
outline: none;
}
#rectangle {
position: relative;
float: left;
height: 30px;
width: 40px;
background-color: white;
text-align: center;
cursor: pointer;
outline: none;
}
#text {
position: relative;
float: left;
height: 30px;
width: 40px;
background-color: white;
text-align: center;
cursor: pointer;
outline: none;
}
#brush {
margin-right: 20px;
}
#reset,
#save {
position: relative;
float: right;
font-size: 20px;
font-family: Verdana;
font-weight: 500;
background-color: white;
color: #4f4f4f;
text-align: center;
cursor: pointer;
}
#reset {
height: 30px;
width: 70px;
margin-right: 15px;
}
#save {
height: 30px;
width: 77px;
margin-right: 10px;
}