How can i get my animation to stop before fading out?

Question

I can't get my logo to stay for 3 seconds before fading out, i don't want to use jquery, i'm using pure javascript. what i basically want is for my logo to

FADE-IN | STOP 3 SECONDS | FADEOUT

So far is fading in and out without a pause. How can i do it? what is wrong?

I know i shouldn't probably be using the same interval or maybe use timeout instead but not sure were would that go, i have tried many things that have not been successful, i still need to find a way to delay the fadeout for maybe 1 or 2 seconds. I have also created a function wait, that would delay for a certain amount of time, but still, not sure where to call the function as is not working as i expected. Thanks!!

document.body.onload=setupCanvas();
var bluex = 140;
var bluey = 400;
var greenx = 1220;
var greeny = 400;
var redx = 680;
var redy = -95;
var imgx = 1355;
var imgy = 290;
var countdown = 400;
var opacity = 0;
var intervalID = 0;
var intervalID2 = 0;
var cancelled = false;

function setupCanvas(){
    var canvas = document.getElementById("logo-animation");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        drawBackground();
        img = document.createElement("img");
        img.src = "../images/ts.png";
        img.alt = "Tranquil Services logo";
        
     window.setInterval(draw, 36);
     window.setInterval(show, 100);
     window.setInterval(hide, 100); 
    }
    
function draw(){
         
    if (countdown < 600){
                            countdown+= 20;
                            imgx -= 60;
                            bluex +=50;
                            redy +=45;
                            greenx -= 50;
                            
                            drawBackground();
                            ctx.drawImage(img,imgx,imgy);
                            
                        }   
                }

    function show() {
                        var canvas = document.getElementById("logo-animation");
                        opacity = Number(window.getComputedStyle(canvas)
                                         .getPropertyValue("opacity"));
                        if (opacity < 1) {
                            opacity = opacity + 0.1;
                            canvas.style.opacity = opacity
                        } else{
                            clearInterval(intervalID);
                            //canvas.style.display = "none";
                        }
                    }
                    
                                
function hide(){

          var body=document.getElementById("canvas");
          opacity =
 Number(window.getComputedStyle(body).getPropertyValue("opacity"))
            if(opacity>0){
                   opacity=opacity-0.1;
                           body.style.opacity=opacity
            }
            else{
                clearInterval(intervalID); 
            }
        } 

function drawBackground(){

    ctx.fillStyle = '#ffffff';
    ctx.rect(0, 0, 1920, 1080);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(bluex, bluey, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#1a52c2";
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(redx, redy, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#c21a43";
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(greenx, greeny, 50, 0, 2 * Math.PI, false);
    ctx.strokeStyle = "#2c981d";
    ctx.lineWidth = 10;
    ctx.stroke();

}
}```

Answer 1

I can't seem to get your code to work so all I can do is offer you another method.

I am using requestAnimationFrame to control the fade speed by incrementing fade . This can vary the fade speed is someone has a faster refresh rate. Also I am using setInterval as a clock so when it hits 3 second after the fade in it will fade back out.

This can also be done with just CSS using keyframes.

 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); canvas.width = 640; canvas.height = 360; let alpha = 0; let fade = 0; let clock = 0; let logo = new Image(); logo.src = "https://i2.wp.com/bestlifeonline.com/wp-content/uploads/2018/09/tostitos.jpg?resize=640%2C360&ssl=1"; let animateImage = (a) => { ctx.globalAlpha = a; ctx.drawImage(logo, 0, 0) } function secondsClock() { clock += 1; } let clockInt = setInterval(secondsClock, 1000); let animate = () => { ctx.clearRect(0,0,canvas.width, canvas.height) fade < 400? fade++: fade = 400; if (alpha < 1 && clock > 1 && clock < 4 && fade%1==0) { alpha+=0.1; } if (alpha >= 0 && clock > 4 && fade%1==0) { alpha-=0.1; } animateImage(alpha); requestAnimationFrame(animate) } animate();

 <canvas id="canvas"></canvas>

A CSS option

 #logo { width: 630px; height; 340px; opacity:0; animation: fade 4s linear forwards; } @keyframes fade { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }

 <img src="https://i2.wp.com/bestlifeonline.com/wp-content/uploads/2018/09/tostitos.jpg?resize=640%2C360&ssl=1" id='logo'>