<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);
});
