How to make animation in canvas fade in?

Question

JavaScript

Tell me what is my mistake?
It is not possible to make the alpha channel smoothly increase making the object visible.
When the function is called, you need to show the object, I try to implement it at intervals, it doesn’t work.

var canvas = document.getElementById('canvas').getContext('2d');

canvas.globalAlpha = 0;

function draw(){
  canvas.fillRect(25,25,100,100);
  canvas.clearRect(45,45,60,60);
  canvas.strokeRect(50,50,50,50);

  var i = 1;
  setInterval(function(){
    if(i <= 9){
      i++;
      canvas.globalAlpha = '0.' + i;
    }
  }, 50);
}

draw();

Answer 1

It is possible so .
Your mistake is that you change the alpha parameters, but do not redraw the objects on the canvas. And you have an error of two i and it will go like this 0.2,0.3...0.8,0.9, 0.10 . Which will eventually give 10% transparency.