When attempting to create an HTML5 Canvas clock from a tutorial on Youtube. I followed the instructions and all through the demo, I was not able to view my clock on my own browsers (Safari 8.0.7 and FireFox 39.0.3), it displays a blank screen - like there is no code there. After looking in the developer menu (Inspect Element) in Safari, I was informed of this error message with my JavaScript code:
TypeError: null is not an object (evaluating 'myVariable.getContext')
After seeing this, I decided to place message box "breakpoints" to discover where the code stopped executing. I learned using that method that it was indeed in relation to the getContext("2d") method.
I would like to take this opportunity to share my code with you. Please note that there is a loop to be able to refresh this clock every 40 milliseconds in order to get a smooth motion from the seconds clock.
Here is my code:
window.alert("1");
/*Status -- Worked*/
var c = document.getElementById("canvas");
window.alert("2");
/*Status -- Worked*/
var ctx = c.getContext("2d");
window.alert("3");
/*Status -- Failed to show in Safari*/
ctx.strokeStyle = "28d1fa";
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = "28d1fa";
function degToRad(degree) {
"use strict";
var factor = Math.PI / 180;
return degree * factor;
}
function renderTime() {
//Variables
"use strict";
var now = new Date();
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var newSeconds = seconds * (milliseconds / 1000);
//Background
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
gradient.addColorStop(0, "09303a");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillStyle = "333333";
ctx.fillRect(0, 0, 500, 500);
//Hours
ctx.beginPath();
ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 15) - 90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes * 6) - 90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds * 6) - 90));
ctx.stroke();
//Date
ctx.font = "25px Arial bold";
ctx.fillStyle = "28d1fa";
ctx.fillText(today, 175, 250);
//Time
ctx.font = "15px Arial";
ctx.fillStyle = "28d1fa";
ctx.fillText(time, 175, 280);
}
setInterval(renderTime, 40);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
</head>
<body>
<script type="text/javascript" src="script/script.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</body>
</html>When attempting to create an HTML5 Canvas clock from a tutorial on Youtube. I followed the instructions and all through the demo, I was not able to view my clock on my own browsers (Safari 8.0.7 and FireFox 39.0.3), it displays a blank screen - like there is no code there. After looking in the developer menu (Inspect Element) in Safari, I was informed of this error message with my JavaScript code:
TypeError: null is not an object (evaluating 'myVariable.getContext')
After seeing this, I decided to place message box "breakpoints" to discover where the code stopped executing. I learned using that method that it was indeed in relation to the getContext("2d") method.
I would like to take this opportunity to share my code with you. Please note that there is a loop to be able to refresh this clock every 40 milliseconds in order to get a smooth motion from the seconds clock.
Here is my code:
window.alert("1");
/*Status -- Worked*/
var c = document.getElementById("canvas");
window.alert("2");
/*Status -- Worked*/
var ctx = c.getContext("2d");
window.alert("3");
/*Status -- Failed to show in Safari*/
ctx.strokeStyle = "28d1fa";
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = "28d1fa";
function degToRad(degree) {
"use strict";
var factor = Math.PI / 180;
return degree * factor;
}
function renderTime() {
//Variables
"use strict";
var now = new Date();
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var newSeconds = seconds * (milliseconds / 1000);
//Background
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
gradient.addColorStop(0, "09303a");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillStyle = "333333";
ctx.fillRect(0, 0, 500, 500);
//Hours
ctx.beginPath();
ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 15) - 90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes * 6) - 90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds * 6) - 90));
ctx.stroke();
//Date
ctx.font = "25px Arial bold";
ctx.fillStyle = "28d1fa";
ctx.fillText(today, 175, 250);
//Time
ctx.font = "15px Arial";
ctx.fillStyle = "28d1fa";
ctx.fillText(time, 175, 280);
}
setInterval(renderTime, 40);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
</head>
<body>
<script type="text/javascript" src="script/script.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</body>
</html>At your earliest convenience, could you assist me in solving this issue?
It would be greatly appreciated.
Thanks for your time.
Sincerely,
Coder 206
Share Improve this question asked Aug 11, 2015 at 21:16 Coder206Coder206 211 silver badge4 bronze badges3 Answers
Reset to default 2The problem is that you are loading the JavaScript before the canvas is loaded, because the <script> tag is higher up the page.
Load the JavaScript after the canvas and document.getElementById("canvas"); will not be null as the canvas will have been loaded onto the page already.
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript" src="script/script.js"></script>
</body>
You should wait for the page to load before trying to execute your javascript.
So wrap your javascript code inside:
window.onload=function(){
... your code ...
}
Thank you Robin James Kerrison and markE.
To: Robin James Kerrison
Thank you so much for the clarification! This will help me in the future!
To: markE
Thank you for your help, this is my backup when things go wrong ;)
To: Everyone
This is my code in proper working order thanks to the great Stack Overflow users mentioned above.
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "28d1fa";
ctx.lineWidth = 17;
ctx.shadowBlur = 15;
ctx.shadowColor = "28d1fa";
function degToRad(degree) {
var factor = Math.PI / 180;
return degree * factor;
}
function renderTime() {
//Variables
var now = new Date();
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var milliseconds = now.getMilliseconds();
var newSeconds = seconds + (milliseconds / 1000);
//Background
var gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
gradient.addColorStop(0, "09303a");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillStyle = "333333";
ctx.fillRect(0, 0, 500, 500);
//Hours
ctx.beginPath();
ctx.arc(250, 250, 200, degToRad(270), degToRad((hours * 15) - 90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes * 6) - 90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds * 6) - 90));
ctx.stroke();
//Date
ctx.font = "25px Arial bold";
ctx.fillStyle = "28d1fa";
ctx.fillText(today, 175, 250);
//Time
ctx.font = "15px Arial";
ctx.fillStyle = "28d1fa";
ctx.fillText(time, 175, 280);
}
setInterval(renderTime, 40);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
<link rel=""
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="script/script.js"></script>
</body>
</body>
</html>