Canvas Pixel Test

by MegaScience

HTML

<canvas id="myCanvas" width="450" height="450" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

JavaScript

var drawData = {
	e: {},
  pixelScale: 40,
  init: function () {
  	this.e.canvas = document.getElementById("myCanvas");
  	this.e.ctx = this.e.canvas.getContext("2d");
    this.correctCanvas();
    this.debug();
  },
  correctCanvas: function () {
  	["width", "height"].forEach(sca => this.e.canvas[sca] -= this.e.canvas[sca] % this.pixelScale);
  },
  drawPixel: function (x, y, c) {
    //var scale = canvas.width / Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    this.e.ctx.fillStyle = c;
    this.e.ctx.fillRect(x * this.pixelScale, y * this.pixelScale, this.pixelScale, this.pixelScale);
  },
  debug: function () {
    for (let x = 0, z = 0, colors = ["red", "white", "green", "yellow", "blue", "orange"]; x < this.e.canvas.height / this.pixelScale; x++) {
      for (let y = 0; y < this.e.canvas.width / this.pixelScale; y++) {
        this.drawPixel(y, x, colors[z++]);
        if(z >= colors.length) z = 0;
      }
    }
  }
};

drawData.init();