我正在创建一个绘制应用程序的画布但卡住了

Question

我正在创建绘制应用程序的画布，但我的代码卡住了。我是javascript的新手，所以对我来说似乎很难：

＆＃13;

＆＃13;

var input = document.getElementById('chColor');

input.onkeyup = function() {
	document.getElementById('color_check').style.background = input.value;
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown',painting,false);


function painting() {
	
	
	canvas.onmousemove = function(e) {
	var mouseX = e.pageX - canvas.offsetLeft;
	var mouseY = e.pageY - canvas.offsetTop;

	ctx.fillStyle = input.value;
	ctx.fillRect(mouseX,mouseY,10,10);
	}

	canvas.onmouseup = function() {
		canvas.onmousemove = '';
	}
	
}

var erase = document.getElementById('clear');

erase.onclick = function() {
	ctx.clearRect(0,0,canvas.width,canvas.height);
}

＆＃13;

body {
	background: #dfdfdf;
}
.colorplate {
	position: relative;
	width: 100%;
	height: 50px;
	background: #fff;
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,.3);
}
#chColor {
	width: 250px;
	border:none;
	background: none;
	line-height: 50px;
	font-size: 20px;
}
#chColor:focus {
	outline: none;
}
::-webkit-input-placeholder {
	color:#333;
}

#color_check {
	position: absolute;
	width: 250px;
	height: 100%;
	background: #fff;
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
	top:0;
	left:50%;
}
canvas {
	background: #fff;
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
}
#clear {
	padding: 10px;
	border:none;
	background-color: #fff;
	box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.3);
	cursor: pointer;
}
#clear:hover {
	background: #333;
	color:#fff;
}

＆＃13;

<div class="colorplate">
		<input type="text" id="chColor" placeholder="type your color name or hex">
		<div id="color_check"></div>
	</div>bbb
<canvas id="canvas" width="300" height="300"></canvas>
<button id="clear">Erase all</button>

＆＃13;

＆＃13;

＆＃13;

  

请更新一些代码并使其比我的更漂亮。我希望你能解决我的问题。