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 = 20;
var arcDAryW = [];
var arcDAryH = [];

var iw = min/max;
var ih = min/max;

for(i=0;i<w/iw;i++){
  arcDAryW[i] = [];
  arcDAryH[i] = [];
  for(j=0;j<h/ih;j++){
    if(Math.random() >0.5){
      arcDW = true;
    } else {
      arcDW = false;
    }
    if(Math.random() >0.5){
      arcDH = true;
    } else {
      arcDH = false;
    }
    arcDAryW[i][j] = arcDW ;
    arcDAryH[i][j] = arcDH ;
  }
}


function draw() {
  ctx.clearRect(0, 0, w, h);

  var ch = Math.floor(Math.random()*360);
  var color = 'hsl('+ch+',100%,50%)';
  ctx.fillStyle = color;
  //ctx.setLineDash([2, 2]);
  for(i=0;i<w/iw;i++){
    for(j=0;j<h/ih;j++){
      if(i>0){
        ctx.beginPath();
        ctx.moveTo(i*iw, j*ih);
        ctx.lineTo(i*iw, j*ih+ih/3);
        ctx.arc(i*iw, j*ih+ih/3+ih/3/2, ih/3/2, -Math.PI/2, Math.PI/2, arcDAryW[i][j]);
        ctx.lineTo(i*iw, j*ih+ih/3*2+ih/3);
        ctx.stroke();
      }

      if(j>0){
        ctx.beginPath();
        ctx.moveTo(i*iw, j*ih);
        ctx.lineTo(i*iw+iw/3, j*ih);
        ctx.arc(i*iw+ih/3+ih/3/2, j*ih, ih/3/2, -Math.PI, 0, arcDAryH[i][j]);
        ctx.lineTo(i*iw+iw/3*2+iw/3, j*ih);
        ctx.stroke();
      }

    }
  }

}
draw();
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;

  min = Math.min(w,h);
  iw = min/max;
  ih = min/max;
}

window.onresize = resize;
window.addEventListener('click', function() {
  resize();
  document.body.requestFullscreen();
}, false );

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

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

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