'Canvas Clock with transparent background

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

Does anyone know how to make the background of the clock transparent?

Here is the code. I have tried to set ctx.fillStyle to transparent, but this leads into a situation where second hand is not erased after it 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";
    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);
  }
</script>

Thanks in advance!

htmlhtml5-canvas


Solution 1:[1]

Do this

Change code like this.

function drawClock() {
  ctx.clearRect(-radius, -radius, canvas.width, canvas.height);
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

and comment as 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 to your body tag

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

:)

Solution 2:[2]

Change ctx.fillStyle = 'grey'; to ctx.fillStyle = 'transparent';.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Martin Tournoij

Related Questions