<canvas></canvas>
<p>Above I place three flower sprites, each created using the same rendering function, or, "sprite".</p>

html,
body {
  height: 100%;
  text-align: center;
  margin: 0;
}

canvas {
  border: solid;
  display: block;
  margin: auto;
  width: 80%;
  top: 10vw;
  position: relative;
}

p {
  position: relative;
  top: 15vh;
}

// get canvas 2D context object
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const GLOBALS = {};

const PROPS = [];

const CHARS = [];

// function for applying any initial settings
function init() {}

/* OUR FLOWER POT SPRITE */

function Pot(x, y) {
  // stem
  ctx.rect(x + 14, y + 20, 4, 60);
  ctx.stroke();
  ctx.fill();
  // flower head
  ctx.fillStyle = "white";
  ctx.lineWidth = 2;
  ctx.rect(x, y, 10, 10);
  ctx.rect(x + 22, y + 22, 10, 10);
  ctx.rect(x + 22, y, 10, 10);
  ctx.rect(x, y + 22, 10, 10);
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.rect(x + 11, y - 4, 10, 10);
  ctx.rect(x - 4, y + 11, 10, 10);
  ctx.rect(x + 26, y + 11, 10, 10);
  ctx.rect(x + 11, y + 25, 10, 10);
  ctx.stroke();
  ctx.fill();
  ctx.beginPath();
  ctx.rect(x + 6, y + 6, 20, 20);
  ctx.stroke();
  ctx.fill();

  // pot
  ctx.beginPath();
  ctx.rect(x - 4, y + 90, 39, 22);
  ctx.stroke();
  ctx.fill();
  ctx.strokeRect(x - 7, y + 80, 45, 9);
  ctx.rect(x - 7, y + 80, 45, 9);
  ctx.fill();
}

// function for rendering background elements
function renderBackground() {
  // place sprite onto background wherever you please..
  Pot(50, 10);
  Pot(100, 15);
  Pot(180, 5);
}

// function for rendering prop objects in PROPS
function renderProps() {}

// function for rendering character objects in CHARS
function renderCharacters() {}

// function for rendering onscreen controls
function renderControls() {}

// main function to be run for rendering frames
function startFrames() {
  // erase entire canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // render each type of entity in order, relative to layers
  renderBackground();
  renderProps();
  renderCharacters();
  renderControls();

  // rerun function (call next frame)
  window.requestAnimationFrame(startFrames);
}

init(); // initialize game settings
startFrames(); // start running frames