test_img

gistfile1.txt

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const getrgb = (r,g,b) => 'rgb('+Math.floor(r)+','+Math.floor(g)+','+Math.floor(b)+ ')'

const x_start = 16
const x_end = 640-16

let y_start = 0

for(let x=0;x < 640;x++){
    if((Math.floor(x/2)) % 2 == 0){
      ctx.fillStyle = 'black';
    }else{
      ctx.fillStyle = 'white';
    }
    ctx.fillRect(x, 0, 1, 120);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(val,val,val)
  ctx.fillRect(x, 28, 1, 30);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(val,val,val)
  ctx.fillRect(x, 18, 1, 10);
}

y_start = 75

for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(val,0,0)
    ctx.fillRect(x, y_start, 1, 120);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(val,0,0)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(val,0,0)
  ctx.fillRect(x, y_start + 15 , 1, 20);
}

y_start = 125
for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(255,255-val,255-val)
    ctx.fillRect(x, y_start, 1, 120);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(255,255-val,255-val)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(255,255-val,255-val)
  ctx.fillRect(x, y_start + 15, 1, 20);
}

y_start = 75 + 100

for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(0,val,0)
    ctx.fillRect(x, y_start, 1, 120);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(0,val,0)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(0,val,0)
  ctx.fillRect(x, y_start + 15 , 1, 20);
}

y_start = 125 + 100
for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(255-val,255,255-val)
    ctx.fillRect(x, y_start, 1, 120);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(255-val,255,255-val)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(255-val,255,255-val)
  ctx.fillRect(x, y_start + 15, 1, 20);
}

y_start = 75 + 200

for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(0,0,val)
    ctx.fillRect(x, y_start, 1, 50);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(0,0,val)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(0,0,val)
  ctx.fillRect(x, y_start + 15 , 1, 20);
}

y_start = 125 + 200
for(let x=0;x < 640;x++){
    let val = 255
    if((Math.floor(x/2)) % 2 == 0){
      val = 0
    }else{
      val = 255
    }
    ctx.fillStyle = getrgb(255-val,255-val,255)
    ctx.fillRect(x, y_start, 1, 50);
}
for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(255-val,255-val,255)
  ctx.fillRect(x, y_start + 10, 1, 5);
}
for(let x=x_start;x < x_end;x++){
  const val = (x - x_start)/(x_end-x_start) * 255
  ctx.fillStyle = getrgb(255-val,255-val,255)
  ctx.fillRect(x, y_start + 15, 1, 20);
}

for(let x=x_start;x < x_end;x++){
  const val = Math.floor((x - x_start)/(x_end-x_start)*16) * 16
  ctx.fillStyle = getrgb(val,val,val)
  ctx.fillRect(x, 400, 1, 40);
}

const downloadLink = document.getElementById('download_link');
downloadLink.href = canvas.toDataURL('image/png');
downloadLink.download = filename;