Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37458

Re: Discover the exact size of canvas container element?

Show all headers | View raw

On Saturday, September 28, 2019 at 7:09:27 PM UTC-5, Michael Haufe (TNO) wrote:
> On Saturday, September 28, 2019 at 7:00:40 PM UTC-5, luserdroog wrote:
> > On Saturday, September 28, 2019 at 6:27:58 PM UTC-5, luserdroog wrote:
> > > I have several divs representing panels which are laid out as a css grid.
> > > In one of the divs I have a single canvas element. How can I determine 
> > > the dimensions that the css rendering has alloted for this canvas div,
> > > so I can resize the canvas to fit?
> > 
> > I found offsetWidth and offsetHeight. That seems to be what I was looking
> > for, but the effect I'm is not exactly what I want. It's not cooperating
> > nicely with the grid. Probably a logic bug on my part. I'm making 2 
> > windowMatchmedia() events for (min-width: 601px) and (min-width: 993px)
> > and setting the canvas size in the handler for 'change' on either of these.
> > 
> > But this seems to "cement" the size and it doesn't scale nicely when the
> > window size is dragged. So, is it appropriate to make many media change
> > queries, like every 100 from 400 to 1200?
> 
> You probably only need CSS for this:
> 
> https://developers.google.com/web/fundamentals/design-and-ux/responsive/
> 
> Also another measure to keep in mind:
> 
> https://css-tricks.com/fun-viewport-units/

Hmm. Yes, I can set width and height to 100% in the css. But I think I don't
like the scaling effect that it produces. Even though, it's a little sputtery
as you resize, I think this code does pretty much what I want, especially
combined with the css to fill in the tweeners.


function fix_canvas_size(){
    let canvas = qs('canvas');
    canvas.width = 200;
    canvas.height = 200;
    let sketch = qs('#sketch'),
	w = sketch.offsetWidth,
	h = sketch.offsetHeight;
    if( w > last_canvas_width ){
	w *= .90;
	h *= 1.10;
    } else {
	w *= .80;
	h *= 1.10;
    }
    last_canvas_width = canvas.width = w;
    last_canvas_width = canvas.height = h;
    turtle_after_render_sketch();
}

function handle_canvas_size(){
    let mm300 = window.matchMedia( "(min-width: 300px)" ),
        mm350 = window.matchMedia( "(min-width: 350px)" ),
        mm400 = window.matchMedia( "(min-width: 400px)" ),
        mm450 = window.matchMedia( "(min-width: 450px)" ),
        mm500 = window.matchMedia( "(min-width: 500px)" ),
        mm550 = window.matchMedia( "(min-width: 550px)" ),
        mm600 = window.matchMedia( "(min-width: 600px)" ),
        mm650 = window.matchMedia( "(min-width: 650px)" ),
        mm700 = window.matchMedia( "(min-width: 700px)" ),
        mm750 = window.matchMedia( "(min-width: 750px)" ),
        mm800 = window.matchMedia( "(min-width: 800px)" ),
        mm850 = window.matchMedia( "(min-width: 850px)" ),
        mm900 = window.matchMedia( "(min-width: 900px)" ),
        mm1000 = window.matchMedia( "(min-width: 1000px)" ),
        mm1100 = window.matchMedia( "(min-width: 1100px)" ),
        mm1200 = window.matchMedia( "(min-width: 1200px)" );
    attach( mm300, 'change', fix_canvas_size);
    attach( mm350, 'change', fix_canvas_size);
    attach( mm400, 'change', fix_canvas_size);
    attach( mm450, 'change', fix_canvas_size);
    attach( mm500, 'change', fix_canvas_size);
    attach( mm550, 'change', fix_canvas_size);
    attach( mm600, 'change', fix_canvas_size);
    attach( mm650, 'change', fix_canvas_size);
    attach( mm700, 'change', fix_canvas_size);
    attach( mm750, 'change', fix_canvas_size);
    attach( mm800, 'change', fix_canvas_size);
    attach( mm850, 'change', fix_canvas_size);
    attach( mm900, 'change', fix_canvas_size);
    attach( mm1000, 'change', fix_canvas_size);
    attach( mm1100, 'change', fix_canvas_size);
    attach( mm1200, 'change', fix_canvas_size);
    fix_canvas_size();
}

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Discover the exact size of canvas container element? luserdroog <luser.droog@gmail.com> - 2019-09-28 16:27 -0700
  Re: Discover the exact size of canvas container element? luserdroog <luser.droog@gmail.com> - 2019-09-28 17:00 -0700
    Re: Discover the exact size of canvas container element? luserdroog <luser.droog@gmail.com> - 2019-09-28 17:06 -0700
    Re: Discover the exact size of canvas container element? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-09-28 17:09 -0700
      Re: Discover the exact size of canvas container element? luserdroog <luser.droog@gmail.com> - 2019-09-28 20:09 -0700
        Re: Discover the exact size of canvas container element? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-09-28 22:08 -0700
          Re: Discover the exact size of canvas container element? luserdroog <luser.droog@gmail.com> - 2019-09-28 22:12 -0700
          Re: Discover the exact size of canvas container element? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-09-28 22:29 -0700

csiph-web