Clever Geek Handbook

Canvas width extends beyond the page with zoom

I have a canvas that I create via Javascript based on the size of the window with the following code:

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    canvas = document.querySelector('#pixies'),
    context = canvas.getContext('2d'),
    gradient = null,
    pixies = new Array();

function setDimensions(e) {
    WIDTH = window.innerWidth - 40;
    // For some reason above code is extending width past the window by about 40px
    HEIGHT = window.innerHeight;
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
}
setDimensions();
window.addEventListener('resize', setDimensions);
      

        
        
        
      

    
<div>
    <div>
      <canvas id="pixies"></canvas>
    </div>
    <div class="container">
      <%= yield %>
    </div>
  </div>
Run codeHide result


Problem: Canvas is rendered based on window.innerHeight

(in pixels). At 100% pageview there is no problem, but at 200% a horizontal scrollbar appears and the canvas extends outward to the right. How do I keep the canvas in window width and prevent horizontal scrolling?

+3


source to share


1 answer


Solution for me: setting canvas style to max width: 100%



0


source






More articles:


All Articles