When You Click On The Rectangle Inside The Canvas, Becomes Full Screen Of All The Shapes Inside It

I draw canvas and I draw inside it some shape and text bar , I would like when I click on the second shape the small rectangle that the canvas becomes full of the screen with the m

Solution 1:

In order to do something when you click inside a shape on canvas you need

1. draw the scape you need to click on
2. detect the position of the mouse when you click the canvas
3. if the mouse is inside the shape do whatever you want to do, in this case open the canvas in full screen.

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

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

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


    var start = 10;

functionframe(){
 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 itdrawShape2();
  // if the point is inside the shape 2 open the canvas in full screenif (ctx.isPointInPath(mouse.x, mouse.y)){
    openFullscreen(c);
  }
});

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

// a function to detect the mouse positionfunctionoMousePos(canvas, evt) {
  varClientRect = canvas.getBoundingClientRect();
    return { //objetox: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid;}

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

To get out of the full screen mode the user can click the esc button. If you want to do it by clicking again the small shape this is more complicated because the canvas is scaled and you would need to know the scale in order to be able to do the mouse detection. Alternatively you may let the user to click anywhere inside the canvas to get out of the full screen.

This is a function to close the full screen mode.

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