How to add split background on clicking button SPLIT

Question

let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
let hit_counter = 0;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text) {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.text = text;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle"
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    context.clearRect(0, 0, window_width, window_height)
    this.draw(context);

    if ((this.position_x + this.radius) > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_x - this.radius) < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_y - this.radius) < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if ((this.position_y + this.radius) > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 100, 50, 3, 'Black', hit_counter);

let updateCircle = function() {
  requestAnimationFrame(updateCircle);
  my_circle.update();

}

updateCircle();

//for color
function changeColor(event) {
  var coloorr = event.value;
  canvas.style.background = coloorr;

}
function split() {
 

}

<button onclick="split()">SPLIT</button>
<canvas id="canvas"></canvas>

JS In function split I am trying to add split background without removing the moving circle but it showing errors please answer how to do that? background like this split background

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
let hit_counter = 0;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text) {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.text = text;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle"
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    context.clearRect(0, 0, window_width, window_height)
    this.draw(context);

    if ((this.position_x + this.radius) > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_x - this.radius) < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_y - this.radius) < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if ((this.position_y + this.radius) > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 100, 50, 3, 'Black', hit_counter);

let updateCircle = function() {
  requestAnimationFrame(updateCircle);
  my_circle.update();

}

updateCircle();

//for color
function changeColor(event) {
  var coloorr = event.value;
  canvas.style.background = coloorr;

}
function split() {
 //In function split I am trying to add split background without removing the moving circle //but it showing errors please answer how to do that?

}

HTML In function split I am trying to add split background without removing the moving circle but it showing errors please answer how to do that?

<button onclick="split()">SPLIT</button>
<canvas id="canvas"></canvas>

Answer 1

Move clearing your canvas out of the Circle's update function, and when you want the split background to be drawn, do that instead of clearing the canvas. (See the freshly renamed redraw function.)

var window_width = 500;
var window_height = 500;

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

canvas.width = window_width;
canvas.height = window_height;

let hit_counter = 0;
let enableSplit = false;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text = "") {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.fillStyle = this.color;
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    this.draw(context);

    if (this.position_x + this.radius > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if (this.position_x - this.radius < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if (this.position_y - this.radius < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if (this.position_y + this.radius > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 110, 50, 3, "black");

let redraw = function () {
  requestAnimationFrame(redraw);
  if (enableSplit) {
    context.fillStyle = "red";
    context.fillRect(0, 0, window_width / 2, window_height);
    context.fillStyle = "blue";
    context.fillRect(window_width / 2, 0, window_width / 2, window_height);
  } else {
    context.clearRect(0, 0, window_width, window_height);
  }
  my_circle.update();
};

redraw();

function split() {
  enableSplit = !enableSplit;
}

<button onclick="split()">SPLIT</button>
<br />
<canvas id="canvas"></canvas>