Layered canvas

by Alon Rotem

HTML

<div id="container">
  <canvas id="background" class="overlay-canvas"></canvas>
  <canvas id="mario" class="overlay-canvas"></canvas>
</div>

CSS

#container {
  background-color: orange;
  position: relative;
}

#background {
  background-color: cyan;
}

#mario {
  background-color: tra sparent;
  position: absolute;
}

.overlay-canvas {
  position: absolute;
  height: 200px;
  width: 400px;
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 50px 0 0 -170px;
}

JavaScript

//https://raw.githubusercontent.com/alonrotem/diego-math/main/images/sprites/diego.png

var floor = 320;

const keysdown = [];
const platforms = [];

function Character(sprite, x, y, width, height, directionSpiteCoords) {
	
  this.sprite = new Image();
  this.sprite.src = sprite;
  this.x = x;
  this.y = y;
  this.baseY = floor;
  this.width = width;
  this.height = height;
  this.directionSpiteCoords = directionSpiteCoords;
  this.speed = 3;
  this.currentSpriteMoveCoords = 1;
  this.jumpHeight = 170;
  this.jumpSpeed = 4;
  this.gravity = (this.jumpSpeed / this.jumpHeight) * 2;
  //don't change the running frame change too quickly
  this.jumpDirection = "";
  this.framesHold = 6;
  var curFrame = 0;

  this.draw = function() {
  //ctx2.clearRect(this.x,this.y, this,width, this.height);
  //ctx2.clearRect(0,0,canvas.width, canvas.height);
  ctx2.fillStyle = "black";
  ctx2.clearRect(this.x,this.y,this.width,this.height);
    var spriteCoordX = 0;
    var spriteCoordY = 0;
    var direction = "X";
    if (keysdown["ArrowRight"] && this.x < 800 - this.width) {
      this.x += this.speed;
      direction = "R";

    } else if (keysdown["ArrowLeft"] && this.x > 0) {
      this.x -= this.speed;
      direction = "L";
    }
    //jumping
    if ((keysdown[" "] || keysdown["ArrowUp"]) || this.jumpDirection == "U") {
      direction = "J";
      //haven't started the jump yet: going up!
      if (!this.jumpDirection) {
        this.jumpDirection = "U";
      }
      //going up
      if (this.jumpDirection == "U") {
        if (this.y > this.baseY - this.jumpHeight) {
          direction = "J";
          this.y -= this.jumpSpeed;
          this.jumpSpeed -= this.gravity;
        } else {
          this.jumpDirection = "D";
          this.jumpSpeed = 4;
        }
      }
      /*
      //falling down
      else if(this.jumpDirection == "D")
      {
          if(this.y < this.baseY)
          {
              this.y += this.jumpSpeed;
              this.jumpSpeed +=...