HTMLで絵を書く #JavaScript

上の画像のようなものが作れます。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
</head>
<body style="background-color:#D0D0D0;">
  <div class="parent">
    <div class="bg">
      <canvas id="SimpleCanvas" width="640" height="640" style="background-color:#FFFFFF;"></canvas>
      <canvas id="SimpleCanvas-layer2" width="120" height="120" style="background-color:rgba(255,0,0,0);;"></canvas>
      <canvas id="SimpleCanvas-layerFont1" width="120" height="120" style="background-color:rgba(0,0,0,0);;"></canvas>
    </div>
  </div>
</body>
<link rel="stylesheet" href="./layout.css" type="text/css">
<script type="text/javascript" src="./draw.js"></script>
</html>

layout.cs

.parent {
    width: 720px;
    height: 0px;
    position: relative; /*relativeに設定*/
    padding: 0em 0em;
    margin:0;
    z-index: 0;
}
.l1 {
    top: 20px;
    left: 0px;
    width: 720px; 
    padding: 0em 0em;
    position: relative; 
    z-index: 2;
}
.bg {
    top: 0px;   /*動的に変更されるので適当*/
    left: 0px;  /*動的に変更されるので適当*/
    width: 400px; /*撮影枠サイズ*/ 
    height: 60px; /*撮影枠サイズ*/
    position: relative; /*absoluteに設定*/
    padding: 0em 0em;
    z-index: 1;
}

.bg canvas {
    position: absolute;
}

draw.js

function draw_1Pattern(step){
  console.log(width,height,pixels.length,width*height*4)
  // ピクセル単位で操作できる
  var cnt = 0
  for (var x = 0; x < width; ++x) {
    for (var y = 0; y < height; ++y) {
      var base = (y * width + x) * 4;
      if((Math.floor(x/step))%2 == 0){
        pixels[base + 0] = 38
        pixels[base + 1] = 31
        pixels[base + 2] = 135
        pixels[base + 3] = 255

      }
      else{
        pixels[base + 0] = 0
        pixels[base + 1] = 133
        pixels[base + 2] = 84
        pixels[base + 3] = 255

      }
    }
  }
}

var canvas = document.getElementById('SimpleCanvas');
canvas.width = screen.width*0.9
canvas.height = screen.height*0.8
var context = canvas.getContext('2d');

// キャンバス全体のピクセル情報を取得
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width, height = imageData.height;
var pixels = imageData.data;  // ピクセル配列：RGBA4要素で1ピクセル
//console.log(pixels)
var step = 160//ボーダーの横幅ピクセル
draw_1Pattern(step)
//console.log(pixels)
// 変更した内容をキャンバスに書き戻す
context.putImageData(imageData, 0, 0);