JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var w=200;
var h=200;

var canv = document.getElementById('canvas');
var ctx = canv.getContext('2d');
canv.width=w;
canv.height=h;
var r=[];
r[0]={x:25,y:15,w:20,h:35,dx:1.2,dy:2.5};
r[1]={x:35,y:35,w:58,h:85,dx:2.2,dy:1.1};
setInterval(test,15);

function test()
{
	ctx.clearRect(0,0,w,h);
    // move the rects a bit!
	for(i=0;i<r.length;i++)
    {
       	r[i].x=r[i].x+r[i].dx/2;
       	r[i].y=r[i].y+r[i].dy/2;
        if(r[i].x>(w-r[i].w))r[i].dx=-Math.abs(r[i].dx);
        if(r[i].y>(h-r[i].h))r[i].dy=-Math.abs(r[i].dy);
        if(r[i].x<0)r[i].dx=Math.abs(r[i].dx);
        if(r[i].y<0)r[i].dy=Math.abs(r[i].dy);
    }
    ctx.fillStyle="#f00";
    if(  _hybridGameBoxIntersect(r[0],r[1]))
    {
        for(i=0;i<r.length;i++)
        {
             ctx.fillRect(r[i].x,r[i].y,r[i].w,r[i].h);	
        }

    }
    for(i=0;i<r.length;i++)
    {
         ctx.strokeRect(r[i].x,r[i].y,r[i].w,r[i].h);	
    }
}

function _hybridGameBoxIntersect(a,b)
{
     if((a.x+a.w)<b.x) return false;
  if((a.y+a.h)<b.y) return false;
  if((b.x+b.w)<a.x) return false;
  if((b.y+b.h)<a.y) return false;
  return true;
}