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

Question

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

var pointX, pointY , w , h ;

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(){
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

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

frame()

      
              <canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>

Answer 1

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

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();
  }
}