Hello World!

index.pug

canvas#canvas
#board

playground.json

{
  "scripts": [],
  "styles": [
    "https://fonts.googleapis.com/css?family=Roboto:900&display=swap",
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}

script.js

const imgo = new Image(100, 100);
imgo.crossOrigin = "Anonymous"
imgo.src = "https://i.koya.io/world2.png"

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
canvas.width = imgo.width;
canvas.height = imgo.height;
canvas.getContext('2d').drawImage(imgo, 0, 0, imgo.width, imgo.height);

const pixelData = ctx.getImageData(0, 0, imgo.width, imgo.height).data

const rgbToHsl = (r, g, b) => {
  r /= 255, g /= 255, b /= 255

  var max = Math.max(r, g, b), min = Math.min(r, g, b)
  var h, s, l = (max + min) / 2

  if (max == min) {
    h = s = 0
  } else {
    var d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)

    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break
      case g: h = (b - r) / d + 2; break
      case b: h = (r - g) / d + 4; break
    }

		h *= 60
  }

  return { h, s, l }
}

console.log(pixelData)
let html = ""

for(let i = 0; i < pixelData.length; i+=4) {
	let hsl = rgbToHsl(pixelData[i],pixelData[i+1],pixelData[i+2])
	html += `<div style="color:hsl(${hsl.h}, ${hsl.s*100}%, ${hsl.l*100}%); opacity:${hsl.l}">Hello World!</div>`
}


const board = document.getElementById('board');
board.innerHTML = html

style.scss

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background: black;
	color:white;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	canvas {
		display: none;
	}
	#board {
		display: grid;
		place-items: center;
		grid-template-columns: repeat(100,.5rem);
		grid-template-rows: repeat(100,.5rem);
		div {
			display: grid;
			place-items: center;
			//background:rgba(255,255,255,.1);
			font-size: .6rem;
			letter-spacing: -.1rem;
			white-space: pre;
		}
	}
}