JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c"></canvas>

JavaScript

var canvas = document.getElementById('c'),
 ctx = canvas.getContext('2d');



 width = 400;
 height = 400;


 canvas.width = width;
 canvas.height = height;
 

var _grid= [];

var circle = function(radius,x,y,color){

	 this.x = x;
	 this.y = y;
	 this.radius = radius;
	 this.color = color;
      
}



circle.prototype.draw = function() {

      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = this.color;
      ctx.fill();
 
};



var _dots = [];


_dots.push( new circle(10,200,200,'red') );

_dots.push( new circle(10,221,200,'blue') );




function sw(obj1, obj2){
 
  obj1.color = [obj2.color, obj2.color = obj1.color][0];
  
  console.log("Changed");

  render();
 
}


function render(){

_dots[0].draw();
_dots[1].draw();

}


render();	





setTimeout(function(){

 sw( _dots[0] ,  _dots[1] )

},1000 )