CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
Garret Raziel
Garret Raziel

Reputation: 385

Update HTML canvas width and height attributes automatically

I want to use HTML5 canvas with flexbox. I need to set canvas.width and canvas.height automatically when user resizes window. I have tried to use jQuery for it:

$(".cnvs").attr("width", $(".cnvs").width());
$(".cnvs").attr("height", $(".cnvs").height());

but it keeps increasing actual width of canvas so it almost fills entire screen. I have put it on jsfiddle - try to resize output window with separator.

Is there any reasonable way how to do it? Thanks.

Edit: Just to be clear: I don't want to fill entire screen with that canvas. I want UI where I have:

<div class="container">
   <div class="control"></div>
   <canvas></canvas>
   <div class="control"></div>
</div>

then use flexbox to put those three elements beside eachother, while canvas will be twice as wide as the other. This works without problem, but canvas.width and canvas.height doesn't get updated, so whenever I render something onto that canvas, it is rendered as if that canvas was 320x140 px.

Edit 2: I am sorry, but (perhaps because of my poor English) I am not clear enough. I will try to explain it once again:

Actual width of canvas element is correct (even without using any JavaScript code) only by using flexbox. My problem is that although width is correct (and $(".cnvs").width() returns correct value of width), it doesn't have any "width" attribute, it is still:

<canvas>
</canvas>

and I need to provide width argument by myself (because it renders badly when it's not set). When I try to use my code or proposed:

...
var rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
...

it behaves weirdly, canvas's width keeps increasing with every resize, but too much (it erases both control divs almost immediately).

Upvotes: 2

Views: 4812

Answers (3)

user1693593
user1693593

Reputation:

Update 2

If I understand the question correct: the canvas has a flex CSS set (not shown in the question right now). It defines the canvas to be 2x the size of the other two elements, but since the canvas is resized and not its bitmap, the drawings are stretches as well and you want the bitmap to adopt dynamically.

If so, do this change to the code -

This update will leave the CSS rules of the canvas element alone and let flexbox handle it. It will read the actual pixel size of the element and then apply it to the bitmap so that data isn't stretched:

$(window).on("resize", function() {
  var cnvs = $(".cnvs")[0];                  // cache canvas element
  var rect = cnvs.getBoundingClientRect();   // actual size of canvas el. itself

  cnvs.width = rect.width;
  cnvs.height = rect.height;
  // ... redraw content here ...
}

Additionally, since resizing the window can produce a lot of events, you may want to consider "debouncing" so that you only deal with the more recent resize:

var timerID;
$(window).on("resize", function() {
  clearTimeout(timerID);
  timerID = setTimeout(function() {
    var cnvs = $(".cnvs")[0];                  // cache canvas element
    var rect = cnvs.getBoundingClientRect();   // actual size of canvas el. itself

    cnvs.width = rect.width;
    cnvs.height = rect.height;
    // ... redraw content here ...
  }, 180);  // adjust at will
}

This will delay the resizing/redrawing until 180ms has passed.

Upvotes: 3

DavidDomain
DavidDomain

Reputation: 15293

You have to add a listener to the resize event on the window object. If your looking for a jquery solution.

$( window ).resize(function() {
   $(".cnvs").attr("width", $(window).width());
   $(".cnvs").attr("height", $(window).height());
});

This should work just fine.

Upvotes: 0

Vandervals
Vandervals

Reputation: 6054

You don't even have to load jQuery, it is simple:

var canvas = document.querySelector("canvas");

window.addEventListener("resize", function(){
  canvas.setAttribute("width", window.innerWidth);
  canvas.setAttribute("height", window.innerHeight)
})

Upvotes: 3

Related Questions