<canvas></canvas>

canvas {
  transform: scale(20);
  transform-origin: 0 0;
  image-rendering: pixelated;
}

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

[canvas.width, canvas.height] = [5, 5];

context.fillRect(0, 0, canvas.width, canvas.height);

const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixel = {
  x: 1,
  y: 2,
  opacity: 0.5
};
imageData.data[4 * (pixel.x + pixel.y * imageData.height) + 3] = Math.round(pixel.opacity * 255);
context.putImageData(imageData, 0, 0);