stroum · November 22, 2017 07:42
diff --git a/paint.html b/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>