Записи

<table width="500"
 height="500" border="1" align="center" class="colorborder">
 <tr>
 <td width="500" height="500" style="cursor:pointer"><canvas id="v10myCanvas1"
 width="500" height="500"></canvas></td>
 </tr>
 <tr>
 <td width="500" align="center">
 <input id="idinColor1" name="33" type="radio" checked="checked"/>
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FF0000;" onclick="document.getElementById('idinColor1').checked = true">
 <input id="idinColor2" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #00FF00;" onclick="document.getElementById('idinColor2').checked = true">
 <input id="idinColor3" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #0000FF;" onclick="document.getElementById('idinColor3').checked = true">
 <input id="idinColor4" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FFFF00;" onclick="document.getElementById('idinColor4').checked = true">
 <input id="idinColor5" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #00FFFF;" onclick="document.getElementById('idinColor5').checked = true">
 <input id="idinColor6" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FF00FF;" onclick="document.getElementById('idinColor6').checked = true">
 </td>
 </tr>
 <tr>
 <td width="500" align="center"><input readonly="readonly" value="clear"
 style="width: 90px; height: 20px; cursor:pointer; border: 1px solid blue;" onclick="MClear()">
 <input id="idinColor7" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FFFFFF;" onclick="document.getElementById('idinColor7').checked = true">
 </td>
 </tr>
</table> 

<script>
 var v10canvas1 = document.querySelector("#v10myCanvas1");
 var v10context1 = v10canvas1.getContext("2d");
 var mX = 0;
 var mY = 0;
 var isDrawing = false;

 function v10update() {
 if (isDrawing) v10context1.beginPath();
 if (isDrawing) v10context1.arc(mX, mY, 3, 0, 2 * Math.PI, true);
 if (isDrawing) {
 if (document.getElementById('idinColor1').checked) {v10context1.fillStyle = "#FF0000";}
 if (document.getElementById('idinColor2').checked) {v10context1.fillStyle = "#00FF00";}
 if (document.getElementById('idinColor3').checked) {v10context1.fillStyle = "#0000FF";}
 if (document.getElementById('idinColor4').checked) {v10context1.fillStyle = "#FFFF00";}
 if (document.getElementById('idinColor5').checked) {v10context1.fillStyle = "#00FFFF";}
 if (document.getElementById('idinColor6').checked) {v10context1.fillStyle = "#FF00FF";}
 if (document.getElementById('idinColor7').checked) {v10context1.fillStyle = "#FFFFFF";}
 }
 if (isDrawing) v10context1.fill();
 requestAnimationFrame(v10update);
 }
v10update();

var MouseMove = function(e) {
 mX = e.layerX - v10canvas1.offsetLeft;
 mY = e.layerY - v10canvas1.offsetTop;
};
var MouseDown = function(e) {
 isDrawing = true;
};
var MouseUp = function(e) {
 isDrawing = false;
};

v10canvas1.addEventListener("mousemove", MouseMove, false);
v10canvas1.addEventListener("mousedown", MouseDown, false);
v10canvas1.addEventListener("mouseup", MouseUp, false);

function MClear() {
 v10context1.clearRect(0, 0, v10canvas1.width, v10canvas1.height);
}
</script>