Only set canvas height when window width is over 768px, otherwise let it default

Question

I am using angular charts to create a bar chart on my page. I only want the height to be set to 80 so it does not take up as much of my page. The issue is that when the size of the page is decreased, on mobile for instance, the chart squishes itself so it is not legible. If I do not set a canvas height, then it is too big on a desktop, but looks great on a screen size smaller than 768px.

How can I set the canvas height to 80 when the screen size is above 768px and let it default on any lesser size. Or set the canvas height to 80 above 768px and to 150 on anything smaller.

I have been pulling my hair out trying to figure this out.

HTML:

<div class="chart-wrapper">
  <div class="chart-title">
    <b>Annual Sales</b>
  </div>
  <div class="chart-stage" ng-controller="BarCtrl">
    <div>
      <canvas id="bar" class="chart chart-bar"
                    chart-data="data" chart-labels="labels" chart-series="series">
      </canvas>
    </div>
  </div>
</div>

I have tried a few different things, but the canvas size does not change at all.

Here is my last attempt:

$(document).ready(function() {
    var $window = $(window);
    var canvas = $('canvas')[0];
    var checkWidth = function() {
        var windowsize = $window.width();
        if (windowsize > 768) {
            canvas.height = 80;
        }
    };
    checkWidth();
    $(window).resize(checkWidth);
});

I should note that I am trying to keep the canvas width to cover the full width of the screen. Which is why I get the squishing effect on a smaller screen.

Here is the codepen I've been using to play around with it: Click here

This is the squishing effect on a smaller screen:

And here is what happens when I try to use media queries and set the height with CSS (I believe it is necessary to set with javascript):

Do you know that default [canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) height is `150`? — hindmost, Feb 12 '16 at 20:26
Yeah, that's why I said either let it default on a smaller screen or set it to 150. — cfly24, Feb 12 '16 at 20:28
Yeah, sounds weird. But it is easily legible at `80` on a larger screen and it needs to be around `150` on a smaller screen to be fully legible and not collapse on itself — cfly24, Feb 12 '16 at 20:33
@jperezov Read [this](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#Attributes) — hindmost, Feb 12 '16 at 20:43
Try declaring `$window` and `canvas` locally in the `checkWidth` function. That code by itself seems to work fine--it's possible one (or both) of those variables are getting overwritten. — jperezov, Feb 12 '16 at 20:53
Just checked your codepen, and it seems to work fine on Chrome (latest). Which browser are you having issues with? — jperezov, Feb 12 '16 at 20:55
I am in the latest Chrome as well. The function is simply not working. Delete it and everything will look the same when resized. If you set `height="80"` on the canvas in the html then you can see the difference. — cfly24, Feb 12 '16 at 20:57

score 0 · Answer 1 · answered Feb 12 '16 at 20:29

0

You could use CSS:

@media only screen and (min-width:768){
    .canvas {
        height: 80px;
    }
}

It's a little bit cleaner than using the js approach. And, I believe, faster :)

answered Feb 12 '16 at 20:29

Bruno Moutinho

51
6

This is what I was hoping I could do, but it stretches the canvas when I do this. – cfly24 Feb 12 '16 at 20:32
@cfly24 It stretches the height of the canvas? or the width? You could also try to set the max-height and max-width property... – Bruno Moutinho Feb 12 '16 at 20:37
Stretches the height – cfly24 Feb 12 '16 at 20:39
Try testing here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty I've put this code inside and it worked: – Bruno Moutinho Feb 12 '16 at 20:43
@cfly24 try setting width: auto – Bruno Moutinho Feb 12 '16 at 20:53
That's the issue; I am trying to keep the width at 100% of the screen. I'm thinking I need to manually redraw it when I resize. – cfly24 Feb 12 '16 at 20:55
1

I've found this question: http://stackoverflow.com/questions/30217380/html5-canvas-redraw-on-resize which looks like (in the first answer) he can resize the canvas... He is using js – Bruno Moutinho Feb 12 '16 at 20:58

Bug · Answer 2 · 2016-02-14T07:58:58.470

0

A vanilla js option, ive set 2 height properties but you may only need to set 1

var viewWidth=document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
var barHeight=150;
if(viewWidth>768) barHeight=80;

document.getElementById('bar').style.height=barHeight+'px';
document.getElementById('bar').height=barHeight;

edited Feb 14 '16 at 07:58

answered Feb 12 '16 at 20:58

Bug

508
1
3
15

Only set canvas height when window width is over 768px, otherwise let it default

2 Answers2