building a clock with html canvas

Question

I want to create a clock using HTML5, canvas and JavaScript. However I don't understand why when I run the following code with Sublime I can't see anything. I tried to see something using both Internet Explorer and Google Chrome. Maybe the error is in the code?

This is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Clock</title>
    <!--<script src="clockJS.js" ></script>-->
</head>
<body>

    <canvas id="canvas" width="500" height="500"></canvas>
    <img id="myImage" />
    <script>

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle = '28d1fa';
    ctx.linewidth = 17;
    ctx.lineCap = "round";
    ctx.shadowBlur = 15;
    ctx.shadowColor = '28d1fa';

    function degToRad(degree) {
        var factor = Math.PI / 180;
        return degree * factor;
    }

    function renderTime() {
        var now = new Date();
        var today = now.toDateString();
        var time = today.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.createRadioGradient(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 = "23px Arial bold";
        ctx.fillStyle = '28d1fa';
        ctx.fillText(today, 175, 250);

        //Time
        ctx.font = "23px Arial";
        ctx.fillStyle = '28d1fa';
        ctx.fillText(time, 175, 280);

        var dataUrl = canvas.toDataUrl();

        document.getElementById('myImage').src = dataUrl;

    }

    setInterval(renderTime, 40);

    </script>

</body>
</html>

Can someone help me?

Answer 1

Change this lines:

var time = today.toLocaleTimeString();
gradient = ctx.createRadioGradient(250, 250, 5, 250, 250, 300);
var dataUrl = canvas.toDataUrl();

To this:

var time = now.toLocaleTimeString();
gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
var dataUrl = canvas.toDataURL();

That should get you something into the screen. I recommend you using Chrome's developer console to see all the JavaScript errors.

Answer 2

  var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var radius = canvas.height / 2; ctx.translate(radius, radius); radius = radius * 0.90 setInterval(drawClock, 1000); function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); } function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2*Math.PI); ctx.fillStyle = 'white'; ctx.fill(); grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); grad.addColorStop(0, '#333'); grad.addColorStop(0.5, 'white'); grad.addColorStop(1, '#333'); ctx.strokeStyle = grad; ctx.lineWidth = radius*0.1; ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); ctx.fillStyle = '#333'; ctx.fill(); } function drawNumbers(ctx, radius) { var ang; var num; ctx.font = radius*0.15 + "px arial"; ctx.textBaseline="middle"; ctx.textAlign="center"; for(num = 1; num < 13; num++){ ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius*0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } } function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hour*Math.PI/6)+ (minute*Math.PI/(6*60))+ (second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07); //minute minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); drawHand(ctx, minute, radius*0.8, radius*0.07); // second second=(second*Math.PI/30); drawHand(ctx, second, radius*0.9, radius*0.02); } function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.lineWidth = width; ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); }

 <canvas id="canvas" width="400" height="400" style="background-color:#333"> </canvas>

building a clock with html canvas

Question

2 answers

solution1
1 2016-10-24 19:30:00

solution2
1 2016-10-24 19:39:53

building a clock with html canvas

Question

2 answers

solution1 1 2016-10-24 19:30:00

solution2 1 2016-10-24 19:39:53

solution1
1 2016-10-24 19:30:00

solution2
1 2016-10-24 19:39:53