Записи

<table width="504" height="404" border="0" align="center" class="colorborder" >
 <tr id="v36idpanel">
 <td align="center" height="55">
 <div class="formradiogroup">
 <div class="formradiogroupitem"><input id="melok1radio1" type="radio" name="53" checked><label for="melok1radio1" onclick="v21NumFon = 1; v21changeFon(); v21MClear();">1</label></div>
 <div class="formradiogroupitem"><input id="melok1radio2" type="radio" name="53"><label for="melok1radio2" onclick="v21NumFon = 2; v21changeFon(); v21MClear();">2</label></div>
 <div class="formradiogroupitem"><input id="melok1radio3" type="radio" name="53"><label for="melok1radio3" onclick="v21NumFon = 3; v21changeFon(); v21MClear();">3</label></div>
 <div class="formradiogroupitem"><input id="melok1radio4" type="radio" name="53"><label for="melok1radio4" onclick="v21NumFon = 4; v21changeFon(); v21MClear();">4</label></div>
 <div class="formradiogroupitem"><input id="melok1radio5" type="radio" name="53"><label for="melok1radio5" onclick="v21NumFon = 5; v21changeFon(); v21MClear();">5</label></div>
 <div class="formradiogroupitem"><input id="melok1radio6" type="radio" name="53"><label for="melok1radio6" onclick="v21NumFon = 6; v21changeFon(); v21MClear();">6</label></div>
 <div class="formradiogroupitem"><input id="melok1radio7" type="radio" name="53"><label for="melok1radio7" onclick="v21NumFon = 7; v21changeFon(); v21MClear();">7</label></div>
 </div>
 </td>
 <td id="v21idpoint" width="100" align="center" height="55">point = 0</td>
 <td align="center" height="30"><input type="button" value="clear" onclick="v21MClear()"></td>
 </tr>
 <tr>
 <td width="500" height="400" colspan="3" style="cursor:pointer; border: 1px solid blue"><canvas id="myCanvas21" width="500" height="400"></canvas></td>
 </tr>
 <tr>
 <td width="500" align="center" colspan="3">
 <input id="v21idinColor1" name="21" type="radio" checked="checked" />
 <input type="button" style="background-color: #FF0000;" onclick="document.getElementById('v21idinColor1').checked = true">
 <input id="v21idinColor2" name="21" type="radio" />
 <input type="button" style="background-color: #00FF00;" onclick="document.getElementById('v21idinColor2').checked = true">
 <input id="v21idinColor3" name="21" type="radio" />
 <input type="button" style="background-color: #0000FF;" onclick="document.getElementById('v21idinColor3').checked = true">
 <input id="v21idinColor4" name="21" type="radio" />
 <input type="button" style="background-color: #FFFF00;" onclick="document.getElementById('v21idinColor4').checked = true">
 <input id="v21idinColor5" name="21" type="radio" />
 <input type="button" style="background-color: #00FFFF;" onclick="document.getElementById('v21idinColor5').checked = true">
 <input id="v21idinColor6" name="21" type="radio" />
 <input type="button" style="background-color: #FF00FF;" onclick="document.getElementById('v21idinColor6').checked = true">
 </td>
 </tr>
</table>

<script>
var v21canvas = document.querySelector("#myCanvas21");
var v21context = v21canvas.getContext("2d");
var v21w = v21canvas.width;
var v21h = v21canvas.height;
var v21mX = 0;
var v21mY = 0;
var v21isDrawing = false;
var v21logo = new Image();
var v21imgData;
var v21pixels;
var v21colpoint = 0;
var v21NumFon = 1;

//add
function getOffset(elem) {
 if (elem.getBoundingClientRect) {
 return getOffsetRect(elem)
 } else {
 return getOffsetSum(elem)
 }
}
 
function getOffsetSum(elem) {
 var top=0, left=0
 while(elem) {
 top = top + parseInt(elem.offsetTop)
 left = left + parseInt(elem.offsetLeft)
 elem = elem.offsetParent
 }
 return {top: top, left: left}
}
 
function getOffsetRect(elem) {
 // (1)
 var box = elem.getBoundingClientRect()
 
 // (2)
 var body = document.body
 var docElem = document.documentElement
 
 // (3)
 var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
 var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
 
 // (4)
 var clientTop = docElem.clientTop || body.clientTop || 0
 var clientLeft = docElem.clientLeft || body.clientLeft || 0
 
 // (5)
 var top = box.top + scrollTop - clientTop
 var left = box.left + scrollLeft - clientLeft
 
 return { top: Math.round(top), left: Math.round(left) }
}
//end add

 function v21update() {
 if (v21isDrawing) v21context.beginPath();
 if (v21isDrawing) v21context.arc(v21mX, v21mY, 20, 0, 2 * Math.PI, true);
 if (v21isDrawing) v21context.fillStyle = 'RGB(250,127,39)';
 if (v21isDrawing) v21context.fill();
 requestAnimationFrame(v21update);
 }
 v21update(); 
 v21changeFon();
 
 function v21changeFon() {
 if (v21NumFon === 1){
 v21logo.src = "data:image/png;base64,прозрачная картинка1";
 }
 if (v21NumFon === 2){
 v21logo.src = "data:image/png;base64,прозрачная картинка2";
 }
 if (v21NumFon === 3){
 v21logo.src = "data:image/png;base64,прозрачная картинка3";
 }
 if (v21NumFon === 4){
 v21logo.src = "data:image/png;base64,прозрачная картинка4";
 }
 if (v21NumFon === 5){
 v21logo.src = "data:image/png;base64,прозрачная картинка5";
 }
 if (v21NumFon === 6){
 v21logo.src = "data:image/png;base64,прозрачная картинка6";
 }
 if (v21NumFon === 7){
 v21logo.src = "data:image/png;base64,прозрачная картинка7";
 }
}

 v21logo.onload = function(){
 
 var v21posX = (v21w - this.width)/2;
 var v21posY = (v21h - this.height)/2;
 v21context.drawImage(this, v21posX, v21posY);
 v21imgData = v21context.getImageData(0, 0, v21w, v21h);
 v21pixels = v21imgData.data;
 //blue
 for (var i=0; i<v21imgData.data.length; i+=4)
 {
 if (v21imgData.data[i+3]===255) {
 v21imgData.data[i]=128;
 v21imgData.data[i+1]=128;
 v21imgData.data[i+2]=255;
 }
 }
 v21context.putImageData(v21imgData,0,0);
 }
 
 function v21MClear() {
 v21context.clearRect(0, 0, v21w, v21h);
 v21logo.onload();
 v21colpoint = 0;
 document.getElementById('v21idpoint').innerHTML = 'point = '+v21colpoint;
 }
 var v21MouseMove = function(e) {
 document.getElementById('v36idpanel').style.backgroundColor = 'rgb(255, 255, 204)';
 var v21elm = document.getElementById('myCanvas21');
 var v21coordspanel = getOffset(v21elm);
 v21mX = e.pageX - v21coordspanel.left;
 v21mY = e.pageY - v21coordspanel.top;
 var v21x = e.offsetX;
 var v21y = e.offsetY;
 var v21dx = e.movementX;
 var v21dy = e.movementY;
 if (e.buttons > 0) {
 v21context.beginPath();
 v21context.lineWidth = 40;
 v21context.strokeStyle = 'RGB(250,127,39)';
 v21context.moveTo(v21x, v21y);
 v21context.lineTo(v21x - v21dx, v21y - v21dy);
 v21context.stroke();
 v21context.closePath();
 }
 if (v21isDrawing && (v21imgData.data[((v21imgData.width * v21mY) + v21mX) * 4 + 3] != 255))
 {v21colpoint = v21colpoint + 1; document.getElementById('v21idpoint').innerHTML = 'point = '+v21colpoint; document.getElementById('v36idpanel').style.backgroundColor = '#fff0ff';}
 };
 var v21MouseDown = function(e) {
 v21isDrawing = true;
 };
 var v21MouseUp = function(e) {
 v21isDrawing = false;
 var v21imgDataNew = v21context.getImageData(0,0,v21canvas.width,v21canvas.height)
 for (var i=0; i<v21imgData.data.length; i+=4)
 {
 if (v21imgData.data[i+3]===255) {
 if ((v21imgDataNew.data[i+0]===250)||(v21imgDataNew.data[i-4+0]===250)||(v21imgDataNew.data[i+4+0]===250)) {
 if (document.getElementById('v21idinColor1').checked) { v21imgData.data[i]=255; v21imgData.data[i+1]=0; v21imgData.data[i+2]=0;}
 if (document.getElementById('v21idinColor2').checked) { v21imgData.data[i]=0; v21imgData.data[i+1]=255; v21imgData.data[i+2]=0;}
 if (document.getElementById('v21idinColor3').checked) { v21imgData.data[i]=0; v21imgData.data[i+1]=0; v21imgData.data[i+2]=255;}
 if (document.getElementById('v21idinColor4').checked) { v21imgData.data[i]=255; v21imgData.data[i+1]=255; v21imgData.data[i+2]=0;}
 if (document.getElementById('v21idinColor5').checked) { v21imgData.data[i]=0; v21imgData.data[i+1]=255; v21imgData.data[i+2]=255;}
 if (document.getElementById('v21idinColor6').checked) { v21imgData.data[i]=255; v21imgData.data[i+1]=0; v21imgData.data[i+2]=255;}
 }}
 }
 v21context.putImageData(v21imgData,0,0);
 };
 v21canvas.addEventListener("mousemove", v21MouseMove, false);
 v21canvas.addEventListener("mousedown", v21MouseDown, false);
 v21canvas.addEventListener("mouseup", v21MouseUp, false);
</script>