How to add split background on clicking button SPLIT-CodePudding

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>

CodePudding user response：

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>