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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
body {
margin: 0px;
padding: 0px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(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);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System

Questions / Comments: