1

canvas1 and canvas2 not inheriting the parent width and height from css like I was expecting. I can fix this by assigning canvas1 and canvas2 width and height explicitly with javascript, but I was hoping for a less hackish way to solve this, i.e. pure css.

` 

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            #parent {
                width: 1000px;
                height: 600px;
            }

            #div1 {
                position: absolute;
                z-index:0;
            }

            #div2 {
                position: absolute;
                z-index:1;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="div1">
                <canvas id="canvas1">
                </canvas>
            </div>
            <div id="div2">
                <canvas id="canvas2">
                </canvas>
            </div>
        </div>
        <script>
            var parent = document.getElementById("parent");
            var parentWidth = parent.offsetWidth;
            var parentHeight = parent.offsetHeight;

            alert("parentWidth = " + parentWidth);
            alert("parentHeight = " + parentHeight);

            var div1 = document.getElementById("div1");
            var div1Width = div1.offsetWidth;
            var div1Height = div1.offsetHeight;

            alert("div1Width = " + div1Width);
            alert("div1Height = " + div1Height);

            var canvas1 = document.getElementById("canvas1");
            var canvas1Width = canvas1.offsetWidth;
            var canvas1Height = canvas1.offsetHeight;

            alert("canvas1Width = " + canvas1Width);
            alert("canvas1Height = " + canvas1Height);

            var div2 = document.getElementById("div2");
            var div2Width = div2.offsetWidth;
            var div2Height = div2.offsetHeight;

            alert("div2Width = " + div2Width);
            alert("div2Height = " + div2Height);

            var canvas2 = document.getElementById("canvas2");
            var canvas2Width = canvas2.offsetWidth;
            var canvas2Height = canvas2.offsetHeight;

            alert("canvas2Width = " + canvas2Width);
            alert("canvas2Height = " + canvas2Height);
        </script>
    </body>
</html>      `
John Stafford
  • 565
  • 2
  • 9
  • 29
  • 1
    It's best not to reset the canvas's CSS width/height because unless it's done proportionally, the resulting canvas content will be distorted--stretched. Instead the common practice is to set the canvas element's width/height using html or javascript: `` or `document.getElementById('mycanvas').width=1000...` Nothing "hackish" about it ;-) – markE Dec 01 '14 at 18:23
  • thanks Mark! yes I am a new HTML5 developer. I will go ahead and do it like you said. – John Stafford Dec 01 '14 at 18:53
  • 2
    @markE - You should put that as an answer so that John can accept it. – Josh Burgess Dec 01 '14 at 20:56
  • possible duplicate of [Canvas is stretched when using CSS but normal with "width" / "height" properties](http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) –  Dec 02 '14 at 01:34
  • yes, I think this boils down to the width and height of the canvas is separate from the css width and height of the canvas element – John Stafford Dec 02 '14 at 16:30
  • You could also master the width and height from css and then use JS to keep it in line: see resizeCanvasToDisplaySize at: https://webglfundamentals.org/webgl/resources/webgl-utils.js – Jake_Howard Aug 18 '17 at 18:54

0 Answers0