html - How to make canvas element expand and occupy all remaining available space without enabling scrollbars -
the next code has 3 divs each containing, p element, canvas element , buttonelement.
how create canvas expand , occupy much width , height possible leaving enought space p element @ top , button element @ bottom webpage looks like
**welcome canvas** |--------------------------------| | | | expand total width , height | | | | | | | | | | | | | | | | | |--------------------------------| button index.html
<!doctype html> <html> <head> <title>hello</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <div class="div_parent"> <div class="div_child0_title"> <p>welcome canvas</p> </div> <div class="div_child1_canvas"> <canvas id="canvas"></canvas> </div> <div class="div_child3_button"> <button id="playbutton" type="button">play</button> </div> </div> <script src="/javascripts/vendor/jquery-1.11.0.min.js"></script> <script> $(document).ready(function () { var canvas = document.getelementbyid('canvas'), context = canvas.getcontext('2d'); context.strokestyle = "green"; context.strokerect(0, 0, canvas.width, canvas.height); }); </script> </body> </html> css not work
html, body { margin: 0px; } .div_parent { position: relative; width: 100%; height: 100%; } .div_child1_canvas { position: relative; width: 100%; height: 100%; } html css html5 canvas
No comments:
Post a Comment