html - Canvas Clock with transparent background -

here canvas clock based on example w3schools.com: https://jsfiddle.net/z529mk97/

does know how make background of clock transparent?

here code. have tried set ctx.fillstyle transparent, leads situation second hand not erased after has moved.

<canvas id="canvas" width="400" height="400">  </canvas>    <script>    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 = 'grey';      ctx.fill();      grad = ctx.createradialgradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);      grad.addcolorstop(0, 'white');      grad.addcolorstop(0.5, 'white');      grad.addcolorstop(1, 'white');      ctx.strokestyle = "white";      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";      (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 = 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);    }  </script>

thanks in advance!

do this

change code this.

function drawclock() {   ctx.clearrect(-radius, -radius, canvas.width, canvas.height);   drawface(ctx, radius);   drawnumbers(ctx, radius);   drawtime(ctx, radius); } 

and comment shown below

function drawface(ctx, radius) {   var grad;   ctx.beginpath(); /*  ctx.arc(0, 0, radius, 0, 2*math.pi);   ctx.fillstyle = "rgba(255, 255, 255, 0.7)";   ctx.fill();*/ 

try giving background colour body tag

js fiddle demo : https://jsfiddle.net/mhnwaa91/

:)

thanks , regards, sebine francis