document.title = '創作言語メーカー あいうえお表に対応した言語をつくる';

var minVH = Math.min(window.innerWidth,window.innerHeight);
var cVH = minVH/12;
var canvasAry = [];

$(function(){
  var aiueoAry = ['', 'あ','い','う','え','お'];
  var akasaAry = ['', 'あ','か','さ','た','な','は','ま','や','ら','わ',];
  var table = $('<table>');
  $('#demo').append(table);
  akasaAry.forEach(function(vj,j){
    var tr = $('<tr>');
    table.append(tr);
    var canvasLine = [];
    canvasAry.push(canvasLine);
    aiueoAry.forEach(function(vi,i){
      if(i===0){
        var td = $('<th>');
        tr.append(td);
        var b = $('<b>').text(vj)
        td.append(b);
      } else if(j===0){
        var td = $('<th>');
        tr.append(td);
        var b = $('<b>').text(vi);
        td.append(b);
      } else {
        var td = $('<td>').text('');
        tr.append(td);
      }
      var canvas = $('<canvas>',{width:cVH, height:cVH});
      canvas.attr({width:cVH, height:cVH});
      canvas.css({border:'1px solid #333'});
      td.append(canvas);
      canvasLine.push(canvas);
    });
  });
  readyCanvas();
  console.log(canvasAry);
});




var readyCanvas = function(){

  canvasAry.forEach(function(canvasLine, j){
    canvasLine.forEach(function(canvasV, i){

    var canvas = canvasV[0];
    //const canvas = document.querySelector('canvas');


    var lastPosition = { x: null, y: null };

    let isDrag = false;

    function draw(c, x, y) {
      if(!isDrag) {
        return;
      }
      var context = c.getContext('2d');

      context.lineCap = 'round';
      context.lineJoin = 'round';
      context.lineWidth = 3;
      context.strokeStyle = 'black';

      if (lastPosition.x === null || lastPosition.y === null) {
        context.moveTo(x, y);
      } else {
        context.moveTo(lastPosition.x, lastPosition.y);
      }
      context.lineTo(x, y);

      context.stroke();

      lastPosition.x = x;
      lastPosition.y = y;
    }

    function clear(c) {
      var context = c.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.closePath();
      isDrag = false;
      lastPosition.x = null;
      lastPosition.y = null;
    }

    function dragStart(c, event) {
      var context = c.getContext('2d');
      context.beginPath();

      isDrag = true;
    }
    function dragEnd(c, event) {
      var context = c.getContext('2d');
      context.closePath();
      isDrag = false;

      lastPosition.x = null;
      lastPosition.y = null;
    }

      canvas.addEventListener('mousedown', (event) => {
        dragStart(canvas, event);
        if(j===0 && i===0){
          for(var jj=0;jj<6;jj++){
            for(var ii=0;ii<11;ii++){
              clear(canvasAry[ii][jj][0]);
            }
          }
        }
      });
      canvas.addEventListener('mouseup', (event) => {
        dragEnd(canvas, event);
        if(j===0 && i===0){
          for(var jj=0;jj<6;jj++){
            for(var ii=0;ii<11;ii++){
              clear(canvasAry[ii][jj][0]);
            }
          }
        }
      });
      canvas.addEventListener('mouseout', (event) => {
        dragEnd(canvas, event);
        if(j===0 && i===0){
          for(var jj=0;jj<6;jj++){
            for(var ii=0;ii<11;ii++){
              clear(canvasAry[ii][jj][0]);
            }
          }
        }
      });
      canvas.addEventListener('mousemove', (event) => {
        if(j===0){
          for(var ii=0;ii<11;ii++){
            draw(canvasAry[ii][i][0], event.offsetX, event.offsetY);
          }
        }
        if(i===0){
          for(var jj=0;jj<6;jj++){
            draw(canvasAry[j][jj][0], event.offsetX, event.offsetY);
          }
        }
        if(i!==0 && j!==0){
          draw(canvas, event.offsetX, event.offsetY);
        }
      });






     });
  });






}

html,body{overflow:hidden;}
table{width:100vw;height:100vh;box-sizing:border-box;}
th,td{border:1px solid #aaa;box-sizing:border-box;text-align:center;position:relative;top:0;left:0;}
b{position:absolute;top:0;left:0;}

/*
table tr {
    transform: scale(-1, 1);
}

table td {
    transform: scale(-1, 1);
}
*/

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-text-jikei/