JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<canvas id="colorCanvas" width="64" height="64"></canvas>

CSS

canvas {
  image-rendering: pixelated;
  width: 100vw;
  height: 100vh;
}

body {
	margin: 0;
}

JavaScript

// Конфигурация
  const CANVAS_SIZE = 64; // Размер canvas (64x64 пикселей)
  const COLOR_BITS = 4;   // 4 бита на канал (16 значений на канал)
  const COLOR_STEP = 17;  // Шаг для перевода 4-битного значения в 8-битное (255 / 15)

  // Получаем контекст canvas
  const canvas = document.getElementById('colorCanvas');
  const ctx = canvas.getContext('2d');

  // Создаем ImageData для хранения пикселей
  const imageData = ctx.createImageData(CANVAS_SIZE, CANVAS_SIZE);

  // Функция для вычисления цвета
  function calculateColor(index) {
    const r = Math.floor(index / 256) & 0xF;       // Красный (4 бита)
    const g = Math.floor(index / 16) & 0xF;        // Зеленый (4 бита)
    const b = index & 0xF;                         // Синий (4 бита)
    return [r * COLOR_STEP, g * COLOR_STEP, b * COLOR_STEP, 255]; // RGBA
  }

  // Заполняем ImageData цветами
  function fillImageDataWithColors(imageData) {
    for (let i = 0; i < CANVAS_SIZE * CANVAS_SIZE; i++) {
      const color = calculateColor(i);
      const pixelIndex = i * 4; // Каждый пиксель занимает 4 байта (RGBA)
      imageData.data.set(color, pixelIndex); // Устанавливаем цвет
    }
  }

  // Основная функция
  function drawColors() {
    fillImageDataWithColors(imageData); // Заполняем цвета
    ctx.putImageData(imageData, 0, 0); // Рисуем на canvas
  }

  // Запуск
  drawColors();