Untitled

// simplest P5 replacement
let _ctx;
let _stroke = false;

function createCanvas(w, h) {
  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  canvas.onselectstart = () => false;
  canvas.ondblclick = () => false;
  _ctx = canvas.getContext('2d');
  _ctx.imageSmoothingEnabled = false;
  return canvas;
}

function clear() {
  if (_ctx) _ctx.clearRect(0, 0, dims.w, dims.h);
}

function fill(...args) {
  if (_ctx) _ctx.fillStyle = 'rgb(' + args.join(',') + ')';
}

function noStroke() {
  _stroke = false;
}

function strokeWeight(weight) {
  if (_ctx) _ctx.lineWidth = weight;
}

function stroke(...args) {
  if (_ctx) _ctx.strokeStyle = 'rgb(' + args.join(',') + ')';
  _stroke = true;
}

function rect(...args) {
  if (_ctx) {
    _ctx.fillRect(...args);
    if (_stroke) _ctx.strokeRect(...args);
  }
}

function image(img, ...args) {
  if (_ctx) _ctx.drawImage(img, 0, 0, img.width, img.height, ...args);
}

function select(ele) {
  return document.getElementById(ele.substring(1));
}

function createElement(eleType, content) {
  const ele = document.createElement(eleType);
  if (content) {
    ele.innerText = content;
  }
  return ele;
}

function createInput(value, type = 'text') {
  const iele = document.createElement('input');
  iele.type = type;
  iele.value = value;
  return iele;
}