AMOLED

by phloe

CSS

canvas {
  image-rendering: pixelated;
  _transform: scale(6);
}

JavaScript

(async () => {

  const width = 800;
  const height =  600;
	const pixelSize = 8;
  function setContext(canvas) {
    const context = canvas.getContext("2d");
    canvas.context = context;
  }

  function createCanvas(width, height) {
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    setContext(canvas);
    return canvas;
  }

  const canvas = createCanvas(width, height);

  document.body.appendChild(canvas);

  function loadImg(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.addEventListener("load", () => {
      	resolve(img);
      }, false);
      img.addEventListener("error", () => {
      	console.log("img failed loading");
        reject(img);
      }, false);
      img.src = url;
    });
  }

  async function loadImgToCanvas(url) {
  	try {
      const img = await loadImg(url);
      const canvas = createCanvas(img.width, img.height);
      canvas.context.drawImage(img, 0, 0);
      return canvas;
    } catch(e) {
    	console.log("loadImgToCanvas failed");
    }
  }

	function drawDot(context, x, y, color) {
  	const r = 1.1;
    context.beginPath();
 		context.fillStyle = color;
  	context.arc(x * 2, y * 2, r, 0, 2 * Math.PI, false);
    context.fill();
  }
  
  function drawBlock(context, x, y, color) {
 		context.fillStyle = color;
  	context.fillRect(x * 2 - 1, y * 2 - 1, 4, 4);
  }

	const lowBuffer = createCanvas(width / 8, height / 8);

	const maskCell = createCanvas(12, 8);
 	maskCell.context.fillStyle = "#000";
  maskCell.context.fillRect(0, 0, 12, 8);
  drawDot(maskCell.context, 0, 0, "#FFF");
  drawDot(maskCell.context, 6, 0, "#FFF");
  drawDot(maskCell.context, 0, 4, "#FFF");
  drawDot(maskCell.context, 6, 4, "#FFF");
  drawDot(maskCell.context, 3, 2, "#FFF");
  drawDot(maskCell.context, 2, 0, "#FFF");
  drawDot(maskCell.context, 2, 4, "#FFF");
  drawDot(maskCell.context, 5, 2, "#FFF");
 ...