Записи

 <p><table width="500" height="400" border="1" align="center">
  <tr>
  <td id="v21idpoint" width="500" align="center">point = 0</td>
  </tr>
  <tr>
  <td width="500" height="400"><canvas id="myCanvas21"
 width="500" height="400"></canvas></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="v21MClear()"></td>
  </tr></p>

 <p></table></p>

 <p><script></p>

 <p>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;</p>

 <p>
  function v21update() {
  if (v21isDrawing)  v21context.beginPath();
  if (v21isDrawing)  v21context.arc(v21mX, v21mY, 3, 0, 2 * Math.PI, true);
  if (v21isDrawing)  v21context.fillStyle = "#FF6A6A";
  if (v21isDrawing)  v21context.fill();
  requestAnimationFrame(v21update);
  }
  v21update(); 
 </script> 
 <script src="https://sklees.narod.ru/js/pngtest.js"></script> 
 <script>
  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) {
     v21mX = e.layerX - v21canvas.offsetLeft;
     v21mY = e.layerY - v21canvas.offsetTop;
    if (v21isDrawing && (v21imgData.data[((v21imgData.width * v21mY) + v21mX) * 4 + 3] != 255))
    {v21colpoint = v21colpoint + 1; document.getElementById('v21idpoint').innerHTML =
 'point = '+v21colpoint;}
    };
  var v21MouseDown = function(e) {
   v21isDrawing = true;
  };
  var v21MouseUp = function(e) {
   v21isDrawing = false;
  };
  v21canvas.addEventListener("mousemove", v21MouseMove, false);
  v21canvas.addEventListener("mousedown", v21MouseDown, false);
  v21canvas.addEventListener("mouseup", v21MouseUp, false);
  
 </script></p>