stroum/paint.html

## paint.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Паинт для бомжей</title>
<style>
	* { padding: 0; margin: 0; }

	body { padding: 10px; }
	canvas { padding: 5px; border: 1px solid #ccc;}
	#colors div {
		padding: 10px;
		margin: 2px;
		height:20px;
		width:20px;
		float:left;
		border: 1px solid #ccc;
	}
</style>
</head>

<body>
<canvas id="paint" height="500px" width="1000px"></canvas>

<div id="colors" style="">
<div id="red" style="background:red;"></div>
<div id="green" style="background:green;"></div>
<div id="blue" style="background:blue;"></div>
<div id="yellow" style="background:yellow;"></div>
<div id="orange" style="background:orange;"></div>
<div id="black" style="background:black;"></div>
<div id="#FF1493" style="background:#FF1493;"></div>
<div id="silver" style="background:silver;"></div>
<div id="#df4b26" style="background:#df4b26;"></div>
<div id="white" style="background:white;"></div>
</div>
<button id="clear" style="padding:12px;">Ещкере</button>
<br>
<select id="lineSize">
	<option value="1"  selected="selected">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
</select>
</body>
<script>
	var canvas = document.querySelector("#paint");
	var ctx = canvas.getContext("2d");
	var draw = false;

	var mouseX = 0;
	var mouseY = 0;

	var clickX = new Array();
	var clickY = new Array();

	var clickDrag = new Array();

	var currentColor = "#df4b26";

	var prev = {x: 0, y: 0};
	var current = {x: 0, y: 0};

	var lineSize = 1;

	document.querySelector("#lineSize").onchange = (e) => {
		size = document.querySelector("#lineSize").value;
		lineSize = parseInt(size, 10);
	};

	document.querySelector("#clear").onclick = (e) => {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		return false;
	};

	canvas.addEventListener("mouseup", (e) => {
		draw = false;
	}, false);

	canvas.addEventListener("mouseleave", (e) => {
		draw = false;
	}, false);

	canvas.addEventListener("mousemove", (e) => {
		current.x = e.offsetX;
		current.y = e.offsetY;

		redraw();
	}, false);

	canvas.addEventListener("mousedown", (e) => {
		draw = true;
		current.x = e.offsetX;
		current.y = e.offsetY;
	}, false);

	function addClick(x, y, dragging)
	{
		clickX.push(x);
		clickY.push(y);
		clickDrag.push(dragging);
	}

	function redraw(){
		ctx.lineJoin = "round";
		ctx.lineWidth = parseInt(lineSize, 10);

		ctx.strokeStyle = currentColor;

		if (draw) {
			ctx.beginPath();
			ctx.moveTo(prev.x, prev.y);
			ctx.lineTo(current.x, current.y);

			ctx.closePath();
			ctx.stroke();
		}
		prev.x = current.x;
		prev.y = current.y;
	}

	document.querySelectorAll("#colors div").forEach((e) => {
		e.onclick = (x) => {
			currentColor = e.id;
			console.log(e.id);
		};
	});


</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Паинт для бомжей</title>
	<style>
	* { padding: 0; margin: 0; }

	body { padding: 10px; }
	canvas { padding: 5px; border: 1px solid #ccc;}
	#colors div {
	padding: 10px;
	margin: 2px;
	height:20px;
	width:20px;
	float:left;
	border: 1px solid #ccc;
	}
	</style>
	</head>

	<body>
	<canvas id="paint" height="500px" width="1000px"></canvas>

	<div id="colors" style="">
	<div id="red" style="background:red;"></div>
	<div id="green" style="background:green;"></div>
	<div id="blue" style="background:blue;"></div>
	<div id="yellow" style="background:yellow;"></div>
	<div id="orange" style="background:orange;"></div>
	<div id="black" style="background:black;"></div>
	<div id="#FF1493" style="background:#FF1493;"></div>
	<div id="silver" style="background:silver;"></div>
	<div id="#df4b26" style="background:#df4b26;"></div>
	<div id="white" style="background:white;"></div>
	</div>
	<button id="clear" style="padding:12px;">Ещкере</button>
	<br>
	<select id="lineSize">
	<option value="1" selected="selected">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	</select>
	</body>
	<script>
	var canvas = document.querySelector("#paint");
	var ctx = canvas.getContext("2d");
	var draw = false;

	var mouseX = 0;
	var mouseY = 0;

	var clickX = new Array();
	var clickY = new Array();

	var clickDrag = new Array();

	var currentColor = "#df4b26";

	var prev = {x: 0, y: 0};
	var current = {x: 0, y: 0};

	var lineSize = 1;

	document.querySelector("#lineSize").onchange = (e) => {
	size = document.querySelector("#lineSize").value;
	lineSize = parseInt(size, 10);
	};

	document.querySelector("#clear").onclick = (e) => {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	return false;
	};

	canvas.addEventListener("mouseup", (e) => {
	draw = false;
	}, false);

	canvas.addEventListener("mouseleave", (e) => {
	draw = false;
	}, false);

	canvas.addEventListener("mousemove", (e) => {
	current.x = e.offsetX;
	current.y = e.offsetY;

	redraw();
	}, false);

	canvas.addEventListener("mousedown", (e) => {
	draw = true;
	current.x = e.offsetX;
	current.y = e.offsetY;
	}, false);

	function addClick(x, y, dragging)
	{
	clickX.push(x);
	clickY.push(y);
	clickDrag.push(dragging);
	}

	function redraw(){
	ctx.lineJoin = "round";
	ctx.lineWidth = parseInt(lineSize, 10);

	ctx.strokeStyle = currentColor;

	if (draw) {
	ctx.beginPath();
	ctx.moveTo(prev.x, prev.y);
	ctx.lineTo(current.x, current.y);

	ctx.closePath();
	ctx.stroke();
	}
	prev.x = current.x;
	prev.y = current.y;
	}

	document.querySelectorAll("#colors div").forEach((e) => {
	e.onclick = (x) => {
	currentColor = e.id;
	console.log(e.id);
	};
	});


	</script>
	</html>