document.title = 'あみだくじ';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:crosshair;}';
document.getElementsByTagName('head').item(0).appendChild(style);

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var max = 16;
var iw = min/max;
var ih = min/max;
var rAry = [];
var goalAry = ['a','b','c','d','e','f','g','h','i','k','l',];
var grayLine;

function draw() {
  ctx.clearRect(0, 0, w, h);;
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = 2;
  ctx.textAlign = 'center';
  ctx.font = 'bold' + ' '+  (iw/4) + 'px' + ' ' + '"メイリオ"';
  var r = 0;
  rAry = [];

  for(j=0;j<h/ih;j++){
    rAry[j] = [];
    for(i=0;i<w/iw;i++){
      if(r>1){
        r = 0;
      } else {
        r = Math.floor(Math.random()*4);
      }
      //ctx.strokeStyle = 'rgba(0,0,0,0.3)'
      ctx.beginPath();
      ctx.moveTo(i*iw, ih*j);
      ctx.lineTo(i*iw, ih*j+ih);
      ctx.stroke();

      if(r>1 && j > 0 && i > 0 && i < Math.floor(w/iw)){
        ctx.beginPath();
        ctx.moveTo(iw*i, j*ih);
        ctx.lineTo(iw*i+iw, j*ih);
        ctx.stroke();
      } else {
        r = 0;
      }
      rAry[j][i] = r;
    }
  }
  console.log(rAry);
  //ctx.strokeStyle = '#ff0000';
  x=0;
  y=0;
  rAry.forEach(function(line){
    x=0;
    line.forEach(function(v){
      if(v>1){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x+iw/2, y);
        ctx.stroke();
      }
      x+=iw;
    });
    y+=ih;
  });
  drawPoint();
  grayLine = ctx.getImageData(0,0,w,h);

}
draw();

function drawPoint() {
  for(i=1;i<w/iw-1;i++){
    ctx.beginPath();
    ctx.arc(i*iw, iw/4, iw/4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = '#ffffff';
    ctx.fillText(i, i*iw, iw/3);
    ctx.fillStyle = '#000000';
  }

  for(i=1;i<w/iw-1;i++){
    var n = (i-1) % goalAry.length;
    var text = goalAry[n];
    ctx.beginPath();
    ctx.arc(i*iw, h-iw/4, iw/4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = '#ffffff';
    ctx.fillText(text, i*iw, h-iw/4);
    ctx.fillStyle = '#000000';
  }
}

function drawLine(x) {
  //console.log(x);
  ctx.putImageData(grayLine,0,0); 
  var ii=0;

  ctx.strokeStyle = '#ff0000';
  ctx.lineWidth = 4;
  for(i=0;i<w/iw;i++){
    if(x > i*iw-iw/2 && x < i*iw+iw/2){
      x = i*iw;
      ii = i;
    }
  }

  for(j=0;j<h/ih;j++){
    
    if(rAry[j][ii]>1){
      ctx.beginPath();
      ctx.moveTo(ii*iw, j*ih);
      ctx.lineTo(ii*iw+iw, j*ih);
      ctx.stroke();
      ii++;
    } else if(ii===0){
    } else if(rAry[j][ii-1]){
      ctx.beginPath();
      ctx.moveTo(ii*iw, j*ih);
      ctx.lineTo(ii*iw-iw, j*ih);
      ctx.stroke();
      ii--;
    }
    ctx.beginPath();
    ctx.moveTo(ii*iw, j*ih);
    ctx.lineTo(ii*iw, j*ih+ih);
    ctx.stroke();

  }
  drawPoint();
}
/*
setInterval(function(){
  draw();
},9);
*/





document.oncontextmenu = function () {return false;}
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
  w = document.body.clientWidth;
  h = document.body.clientHeight;
  cx = w/2;
  cy = h/2;
  iw = min/max;
  ih = min/max;
}

window.onresize = resize;
window.addEventListener('click', function(ev) {
  if(ev.clientY < ih*2){
    drawLine(ev.clientX);
  }
  //resize();
  //document.body.requestFullscreen();
  //draw();
}, false );

window.addEventListener('dblclick', function(ev) {
  draw();
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});

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

view-source:https://hi0a.com/demo/-js/js-canvas-grid-amidakuji/