"TEST: JS on ready - IM314 Canvas"
Bootstrap 3.3.0 Snippet by mmdlowdisan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Learning the Canvas - $(document).ready</h2> <p>Here is how you can use JavaScript in the JS file/tab in Bootsnipp - Thanks Dylan</p> <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Notice, this has been moved. </script> <hr> <h3>$( document ).ready()</h3> A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. <hr> </div> </div>
body { margin: 0px; padding: 0px; }
$(document).ready(function () { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '40pt Calibri'; context.fillStyle = 'blue'; context.fillText('Hello World!', 150, 100); });

Related: See More

Questions / Comments: