eaglehopes Posted July 19, 2022 Share Posted July 19, 2022 My simple html page and script is like this : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Online canvas program</title> </head> <body> <style type="text/css"> .GraphicArea { background-color: #ceccec; border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } </style> <script type="text/javascript"> var gui = document; var canvasElement = gui.getElementById("GraphicArea"); var icerik = canvasElement.getContext("2d"); var canvasWidth,canvasHeight; if (canvasElement.getContext) { // canvas supported gui.getElementById("Canvas Result").innerHTML = "supported"; } else { // canvas-unsupported code here gui.getElementById("Canvas Result").innerHTML = "not supported"; } function setCanvasWidth(w) { canvasWidth=w; canvasElement.style.width=canvasWidth+"px"; } function setCanvasHeight(h) { canvasHeight=h; canvasElement.style.height=canvasHeight+"px"; } </script> <table> <tr> <td> <p id="Canvas Result"></p> </td> </tr> <tr> <td> <form> <label for="canvasWidth">Canvas width :</label> <input type="number" id="width" name="quantity" min="300" max="1000" value="350" onchange="setCanvasWidth(this.value)"></input><br> <label for="canvasWidth">Canvas heigth :</label> <input type="number" id="width" name="quantity" min="300" max="1000" value="350" onchange="setCanvasHeight(this.value)"></input><br> <input type="submit" value="Apply" ><br> </form> </td> <td> <canvas class="GraphicArea" id="GraphicArea" alt="Graphics Area for drawing cross section"> </canvas> </td> </tr> </table> </body> </html> I tried to use gui,canvasElement,canvasWidth and canvasHeigth etc. variables as global scope. However, code does not work. Only work when I define all variables inside the functions again. Why? Where am I doing wrong? Quote Link to comment Share on other sites More sharing options...
Solution eaglehopes Posted July 19, 2022 Author Solution Share Posted July 19, 2022 I found my mistake !! Sorry to disturb, when I put all script tag after canvas object, everything worked ! Element not defined when script is written, I think that is the problem. Quote Link to comment Share on other sites More sharing options...
maxxd Posted July 19, 2022 Share Posted July 19, 2022 You have to wait until a document element is loaded in the DOM before you can use it or interact with it. Look into window.onload. 1 Quote Link to comment Share on other sites More sharing options...
eaglehopes Posted July 20, 2022 Author Share Posted July 20, 2022 (edited) @maxxdI tried what you said as : <script type="text/javascript"> window.onload = function () { draw(); } var gui = document; var canvasElement = gui.getElementById("GraphicArea"); var icerik = canvasElement.getContext("2d"); var canvasWidth=300; var canvasHeight=300; ... </script> It worked like a charm. Thanks. Edited July 20, 2022 by eaglehopes Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.