Canvas full screen

0

I have a problem wanting to make the canvas full screen, the problem is that I want to do it without scale transformations css, I want to do it from css and js with defined sizes

function autoScale(id) {
var d = document, E, iw = window.innerWidth,
ih = window.innerHeight, X, Y, scale;
if(typeof id == 'object') E = id;
else E = d.getElementById(id);

X = iw/2 - E.width/2; // centro en x
Y = ih/2 - E.height/2;// centro en y

if (iw/E.width > ih/E.height) {
    scale = ih/E.height;
} else if (iw/E.width < ih/E.height) {
    scale = iw/E.width;
} else {
    scale = 1;
}
document.getElementsByTagName("html")[0].style.overflow = "hidden";

// acomodar en el centro y escalar a pantalla completa
E.style.transform = 'translate('+X+'px,'+Y+'px) scale('+scale+')';
document.body.width = iw;

// para que se ejecute al cambiar el tamaño de la ventana
window.onresize = function (event) {
    autoScale(id);
}}

The problem is that when wanting to use the mouse to select coordinates of the canvas they change the position when rescaled The real question is how do I do it in order to scale and work the mouse coordinates smoothly and in full screen?

    
asked by Humberto Molina López 06.09.2018 в 20:54
source

1 answer

1

Several things:

  • The resize event triggers with a very high frequency, and this makes it unsuitable for complicated tasks such as recalculating sizes and positions of DOM elements. To do so, it is recommended to use the setTimeout or requestAnimationFramestar method to reduce the frequency with which the resize event is triggered.

  • Each time the window resizes, JavaScript calculates the dimensions of canvas again. If you have something drawn for example several objects that you have saved in an array, JavaScript has to (depending on the case) empty the array and recalculate the position of the objects and draw them again. You will also have to recalculate any variable whose value depends on the size of the canvas. Here is a very simple example:

  • const output = document.getElementById("output");
    const canvas = document.querySelector("canvas");
    const ctx = canvas.getContext("2d");
    let cw = (canvas.width = window.innerWidth);
    let ch = (canvas.height = window.innerHeight);
    
    canvas.addEventListener(
      "mousemove",
      function(evt) {
        let m = oMousePos(canvas, evt);
        marcarCoords(output, m);
      },
      false
    );
    
    canvas.addEventListener(
      "mouseout",
      function(evt) {
        limpiarCoords(output);
      },
      false
    );
    
    function marcarCoords(output, m) {
      output.innerHTML = "x: " + m.x + ", y: " + m.y;
    }
    
    function limpiarCoords(output) {
      output.innerHTML = "";
    }
    
    function init() {
      cw = canvas.width = window.innerWidth;
      ch = canvas.height = window.innerHeight;
    }
    
    setTimeout(function() {
      init();
      addEventListener("resize", init, false);
    }, 15);
    
    function oMousePos(canvas, evt) {
      var ClientRect = canvas.getBoundingClientRect();
      return {
        //objeto
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
      };
    }
    body {
      overflow: hidden;
    }
    canvas {
      background-color: #000;
      cursor:pointer;
    }
    #output{
      color:white;
      font-family:verdana;
      font-size:1.5em;
      position:absolute; 
      width:10em;
      height:1.5em;
      margin:auto;
      top:0;
      bottom:0;
      left:0;
      right:0;
      background:transparent;
      pointer-events:none;
    }
    <div id="output"></div>
    <canvas></canvas>

    Please open it in full page.

        
    answered by 07.09.2018 в 22:33