Adafruit GFX API in JS

adafruit_gfx.html

<canvas id="canvas" width="800" height="600"></canvas>

<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const rgbs = {};

// color is in 565 format
function toRGB(color) {
  const rgb = rgbs[color];
  if (rgb !== undefined) return rgb;

  const red = ((color >> 11 & 0b11111) / 31) * 255;
  const green = ((color >> 5 & 0b111111) / 63) * 255;
  const blue = ((color & 0b11111) / 31) * 255;
  rgbs[color] = `rgb(${red}, ${green}, ${blue})`;
  return rgbs[color];
}

// void drawPixel(uint16_t x, uint16_t y, uint16_t color);
function drawPixel(x, y, color) {
  context.fillStyle = toRGB(color);
  context.fillRect(x, y, 1, 1);
}

// void drawLine(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t color);
function drawLine(x0, y0, x1, y1, color) {
  context.strokeStyle = toRGB(color);
  context.lineWidth = 1;
  context.beginPath();
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.stroke();
}

// void drawRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);
function drawRect(x0, y0, w, h, color) {
  context.strokeStyle = toRGB(color);
  context.lineWidth = 1;
  context.strokeRect(x0, y0, w, h);
}

// void fillRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t color);
function fillRect(x0, y0, w, h, color) {
  context.fillStyle = toRGB(color);
  context.fillRect(x0, y0, w, h);
}

// void drawCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);
function drawCircle(x0, y0, r, color) {
  context.strokeStyle = toRGB(color);
  context.lineWidth = 1;
  context.beginPath();
  context.arc(x0, y0, r, 0, 2 * Math.PI);
  context.stroke();
}

// void fillCircle(uint16_t x0, uint16_t y0, uint16_t r, uint16_t color);
function fillCircle(x0, y0, r, color) {
  context.fillStyle = toRGB(color);
  context.beginPath();
  context.arc(x0, y0, r, 0, 2 * Math.PI);
  context.fill();
}

// void drawTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);
function drawTriangle(x0, y0, x1, y1, x2, y2, color) {
  context.strokeStyle = toRGB(color);
  context.lineWidth = 1;
  context.beginPath();
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x0, y0);
  context.stroke();
}

// void fillTriangle(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1, uint16_t x2, uint16_t y2, uint16_t color);
function fillTriangle(x0, y0, x1, y1, x2, y2, color) {
  context.fillStyle = toRGB(color);
  context.beginPath();
  context.moveTo(x0, y0);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x0, y0);
  context.fill();
}

// void fillScreen(uint16_t color);
function fillScreen(color) {
  context.fillStyle = toRGB(color);
  context.fillRect(0, 0, canvas.width, canvas.height);
}

// void drawBitmap(int16_t x, int16_t y, uint8_t *bitmap, int16_t w, int16_t h, uint16_t color);
function drawBitmap(x, y, bitmap, w, h, color) {
  
}

// Not implemented.
// void drawChar(uint16_t x, uint16_t y, char c, uint16_t color, uint16_t bg, uint8_t size);
// void setCursor(uint16_t x0, uint16_t y0);
// void setTextColor(uint16_t color);
// void setTextColor(uint16_t color, uint16_t backgroundcolor);
// void setTextSize(uint8_t size);
// void setTextWrap(boolean w);
// void drawRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t radius, uint16_t color);
// void fillRoundRect(uint16_t x0, uint16_t y0, uint16_t w, uint16_t h, uint16_t radius, uint16_t color);
function drawRoundRect(x0, y0, w, h, radius, color) { }
function fillRoundRect(x0, y0, w, h, radius, color) { }
function drawChar() {}
function setCursor() {}
function setTextColor() {}
function setTextSize() {}
function setTextWrap() {}
</script>

<script>
  const WHITE = 0b1111111111111111;
  const RED   = 0b1111100000000000;
  const BLACK = 0b0000000000000000;
  fillScreen(WHITE);
  drawRect(0, 0, 200, 200, BLACK);
  
</script>