Записи

<table width="500" height="500" border="1" align="center" class="colorborder">
 <tr>
 <td width="500" height="500" style="cursor:pointer"><canvas id="
v30myCanvas1" width="500" height="500"></canvas></td>
 </tr>
 <tr>
 <td width="500" align="center">
 <input id="v30idinColor1" 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('v30idinColor1').checked = true">
 <input id="v30idinColor2" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #00FF00;" onclick="document.getElementById('v30idinColor2').checked = true">
 <input id="v30idinColor3" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #0000FF;" onclick="document.getElementById('v30idinColor3').checked = true">
 <input id="v30idinColor4" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FFFF00;" onclick="document.getElementById('v30idinColor4').checked = true">
 <input id="v30idinColor5" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #00FFFF;" onclick="document.getElementById('v30idinColor5').checked = true">
 <input id="v30idinColor6" name="33" type="radio" />
 <input readonly="readonly" style="width: 40px; height: 20px; cursor:pointer; border: 1px solid blue;
 background-color: #FF00FF;" onclick="document.getElementById('v30idinColor6').checked = true">
 </td>
 </tr>
 <tr>
 <td width="500" align="center"><input value="sklees" style="width: 190px;
 height: 20px; border: 1px solid blue;" id="v30StrInput">
 </td>
 </tr>
</table> 

<script>
 var v30canvas1 = document.querySelector("#v30myCanvas1");
 var v30context1 = v30canvas1.getContext("2d");
 var mX = 0;
 var mY = 0;
 var isDrawing = false;
 var v30step = [200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200];
 var v30x = [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250];
 var v30y = [250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250];
 var v30fsize = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 var v30NumberClick = 0;
 
 function v30update() {
 v30context1.clearRect(0, 0, v30canvas1.width, v30canvas1.height);
 if (isDrawing) v30context1.beginPath();
 for (var i = 0; i < 20; i=i+1) {

 v30step[i] = v30step[i] + 1;
 if (v30step[i] > 200) v30step[i] = 200;
 v30fsize[i]=20*(200-v30step[i])/200; 

 if (isDrawing) v30context1.font = v30fsize[i] + "px serif";

 v30x[i]=v30x[i]+(250-v30x[i])/100;
 v30y[i]=v30y[i]+(250-v30y[i])/100;

 if (isDrawing) v30context1.fillText(document.getElementById('v30StrInput').value, v30x[i], v30y[i]);
 if (isDrawing) {
 if (document.getElementById('v30idinColor1').checked) {v30context1.fillStyle = "#FF0000";}
 if (document.getElementById('v30idinColor2').checked) {v30context1.fillStyle = "#00FF00";}
 if (document.getElementById('v30idinColor3').checked) {v30context1.fillStyle = "#0000FF";}
 if (document.getElementById('v30idinColor4').checked) {v30context1.fillStyle = "#FFFF00";}
 if (document.getElementById('v30idinColor5').checked) {v30context1.fillStyle = "#00FFFF";}
 if (document.getElementById('v30idinColor6').checked) {v30context1.fillStyle = "#FF00FF";}
 }
 if (isDrawing) v30context1.fill();
 } 
 requestAnimationFrame(v30update);
 }
v30update();

var MouseMove = function(e) {
 mX = e.layerX - v30canvas1.offsetLeft;
 mY = e.layerY - v30canvas1.offsetTop;
};
var MouseDown = function(e) {
 isDrawing = true;
 v30step[v30NumberClick] = 0;
 v30x[v30NumberClick]=mX-50;
 v30y[v30NumberClick]=mY;
 v30fsize[v30NumberClick] = 16;
 v30NumberClick = v30NumberClick + 1;
 if (v30NumberClick > 19) v30NumberClick = 0;
};
var MouseUp = function(e) {
 isDrawing = true;
};

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

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