 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>glyphtest-test</title>
    <style>
      img {
        display: none;
      }  

      table {
        margin: 0 auto;
      }
    </style>
  </head>
  <body onload="draw();">
    <table>
      <tr>
        <td><img src="65"></td>
        <td><img src="65-2"></td>
      </tr>
      <tr>
        <td><img src="66"></td>
        <td><img src="66-2"></td>
      </tr>
    </table>

    <script>
      function draw() {
        for (var i = 0; i < document.images.length; i++) {

          canvas = document.createElement('canvas');
          canvas.setAttribute('width', 300);
          canvas.setAttribute('height', 300);

          document.images[i].parentNode.insertBefore(canvas,document.images[i]);

          ctx = canvas.getContext('2d');

          ctx.imageSmoothingEnabled = false;

          ctx.drawImage(document.images[i], 0, 0, 60, 60);          
        }
      }
    </script>
    
 </body>
</html>