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

Groups > comp.lang.javascript > #37453 > unrolled thread

Discover the exact size of canvas container element?

Started byluserdroog <luser.droog@gmail.com>
First post2019-09-28 16:27 -0700
Last post2019-09-28 22:29 -0700
Articles 8 — 2 participants

Back to article view | Back to comp.lang.javascript

Contents

  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

#37453 — Discover the exact size of canvas container element?

Fromluserdroog <luser.droog@gmail.com>
Date2019-09-28 16:27 -0700
SubjectDiscover the exact size of canvas container element?
Message-ID<e57f102c-b338-402c-a501-d553c4c45c86@googlegroups.com>
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?

[toc] | [next] | [standalone]

#37454

Fromluserdroog <luser.droog@gmail.com>
Date2019-09-28 17:00 -0700
Message-ID<fa5db6d5-16a5-4783-b399-ec0be9191984@googlegroups.com>
In reply to#37453
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?

[toc] | [prev] | [next] | [standalone]

#37455

Fromluserdroog <luser.droog@gmail.com>
Date2019-09-28 17:06 -0700
Message-ID<a0bd6c27-1373-4708-bf6e-fc8ebb664f83@googlegroups.com>
In reply to#37454
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?

That part makes sense, but also it seems like I need to set the canvas 
size to be small, allow the css to do its business, and only then will
I get a nice value from offset* props.

[toc] | [prev] | [next] | [standalone]

#37456

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-09-28 17:09 -0700
Message-ID<c6ad65b5-978a-433f-a1ec-c582d0f69383@googlegroups.com>
In reply to#37454
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/

[toc] | [prev] | [next] | [standalone]

#37458

Fromluserdroog <luser.droog@gmail.com>
Date2019-09-28 20:09 -0700
Message-ID<9348d5be-e135-4534-96c5-dd3ce6e2d2e5@googlegroups.com>
In reply to#37456
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();
}

[toc] | [prev] | [next] | [standalone]

#37459

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-09-28 22:08 -0700
Message-ID<c97deb21-1322-4915-9ead-59a1a2cec78f@googlegroups.com>
In reply to#37458
On Saturday, September 28, 2019 at 10:09:39 PM UTC-5, luserdroog wrote:
> [...]
> 
> 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();
> }

You just want to maintain the aspect ratio on all sizes right?

You definitely don't need all of that redundant code and size breakpoints.

<https://codepen.io/mirisuzanne/pen/XRPzvY>

CSS will dynamically scale the element for presentation, then you just need to update the canvas size to match the new offset size so that the drawing context won't distort it:

<script>
function fixCanvasSize() {
    let c = qs('#myCanvas'),
        w = c.offsetWidth,
        h = this.elem.offsetHeight;
    if (w != c.width || h != c.height) {
        c.width = w;
        c.height = h;
        // changing the canvas element width/height erases the context
        redrawCanvas()
    }
}

window.addEventListener('resize', fixCanvasSize);
</script>

[toc] | [prev] | [next] | [standalone]

#37460

Fromluserdroog <luser.droog@gmail.com>
Date2019-09-28 22:12 -0700
Message-ID<b2c376fd-d48a-44e9-9e05-769e3ab43f58@googlegroups.com>
In reply to#37459
On Sunday, September 29, 2019 at 12:09:06 AM UTC-5, Michael Haufe (TNO) wrote:
> On Saturday, September 28, 2019 at 10:09:39 PM UTC-5, luserdroog wrote:
> > [...]
> > 
> > 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();
> > }
> 
> You just want to maintain the aspect ratio on all sizes right?
> 
> You definitely don't need all of that redundant code and size breakpoints.
> 
> <https://codepen.io/mirisuzanne/pen/XRPzvY>
> 
> CSS will dynamically scale the element for presentation, then you just need to update the canvas size to match the new offset size so that the drawing context won't distort it:
> 
> <script>
> function fixCanvasSize() {
>     let c = qs('#myCanvas'),
>         w = c.offsetWidth,
>         h = this.elem.offsetHeight;
>     if (w != c.width || h != c.height) {
>         c.width = w;
>         c.height = h;
>         // changing the canvas element width/height erases the context
>         redrawCanvas()
>     }
> }
> 
> window.addEventListener('resize', fixCanvasSize);
> </script>

Ooooh. That's much better. Thanks.

[toc] | [prev] | [next] | [standalone]

#37461

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-09-28 22:29 -0700
Message-ID<0118f244-080f-4d38-8c89-71221e23a5f0@googlegroups.com>
In reply to#37459
On Sunday, September 29, 2019 at 12:09:06 AM UTC-5, Michael Haufe (TNO) wrote:
>
> [...]
>
> <script>
> function fixCanvasSize() {
>     let c = qs('#myCanvas'),
>         w = c.offsetWidth,
>         h = this.elem.offsetHeight;
>     if (w != c.width || h != c.height) {
>         c.width = w;
>         c.height = h;
>         // changing the canvas element width/height erases the context
>         redrawCanvas()
>     }
> }
> 
> window.addEventListener('resize', fixCanvasSize);
> </script>

typo:

    h = this.elem.offsetHeight;

should be:

    h = c.offsetHeight

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web