Когда вы нажимаете на прямоугольник внутри холста, становится полноэкранным со всеми фигурами внутри него

Чтобы что-то сделать, когда вы щелкаете внутри фигуры на холсте, вам нужно

1. нарисуйте пейзаж, на который нужно нажать
2. определить положение мыши при нажатии на холст
3. если мышь находится внутри фигуры, делайте все, что хотите, в этом случае откройте холст в полноэкранном режиме.

var pointX = 690,
     pointY = 550,
     w = 30,
     h = 20;

var mouse = {};

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    //ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
    ctx.beginPath();
    ctx.rect(pointX,pointY,w,h);
    //ctx.closePath();
}


    var start = 10;

function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height);
 ctx.strokeStyle='red';
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
 ctx.fillStyle = "red";
 ctx.textAlign = "left";
 ctx.fillText("Hello World",start, 560); 

 drawShape2();
 ctx.stroke(); 
  }

frame();

let i = 0;
c.addEventListener("click",(evt)=>{
  mouse = oMousePos(c, evt);
  //draw the second shape but do not stroke it
  drawShape2();
  // if the point is inside the shape 2 open the canvas in full screen
  if (ctx.isPointInPath(mouse.x, mouse.y)){
    openFullscreen(c);
  }
});

// a function to open in full screen
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

// a function to detect the mouse position
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid;}

<canvas id = "myCanvas" class = "col-12 col-s-12" >I prefer to declare the width and the height of the canvas in JS</canvas>

Чтобы выйти из полноэкранного режима, пользователь может нажать кнопку esc. Если вы хотите сделать это, снова щелкнув маленькую фигуру, это будет сложнее, потому что холст масштабируется, и вам нужно знать масштаб, чтобы иметь возможность обнаруживать мышь. В качестве альтернативы вы можете позволить пользователю щелкнуть в любом месте холста, чтобы выйти из полноэкранного режима.

Это функция закрытия полноэкранного режима.

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}