How to make the javascript shape look the same as in the image and how to clear a javascript canvas shape after animation has ended?

Question

I have this piece of code that I adjusted to a triangle shape. It uses javascript animation to render the triangle, but I can not have it move to the location the image is set, it instead moves too much, and if I adjust the numbers, it does not reach the triangle in the image well and is not in the right angle.

At the moment, I need the black animation triangle to be on the same angle as the white image and the black triangle also has to move to the same location, meaning the triangle has to be exactly the same as the white on the image.

Also, I have the whole function on a button press, so how could I clear the javascript shape and then when invoked, the shape would make the same animation again? The remove button has to remove the black triangle, and when "start animation" button is pressed again, the triangle would invoke the StartAnimation(); function.

How must I do this, to reach the perfect result?

 function StartAnimation() {

  let
  canvas = document.getElementById('canvas');
  let
  ctx = canvas.getContext('2d');
  let
  initCoor = {
   x1 : ctx.canvas.width,
   y1 : 0,

   x2 : ctx.canvas.width,
   y2 : ctx.canvas.height / 2,

   x3 : ctx.canvas.width,
   y3 : ctx.canvas.height / 2,

   x4 : (ctx.canvas.width - ctx.canvas.width / 5),
   y4 : 0,

  };
  function initCanvas() {
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
   ctx.fillStyle = 'transparent';
   ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  }
  function draw_triangle(x1, y1, x2, y2, x3, y3, x4, y4, color) {
   ctx.save();
   ctx.beginPath();
   ctx.moveTo(x1, y1);
   ctx.lineTo(x1, y1);
   ctx.lineTo(x2, y2);
   ctx.lineTo(x3, y3);
   ctx.lineTo(x4, y4)
   ctx.fillStyle = color;
   ctx.fill();
  }
  function setAnimate() {

   initCoor.x4 <= 0 ? initCoor.x4 = 0 : initCoor.x4 -= 10;
   a = true;

   if (a) {

    if (initCoor.y2 >= ctx.canvas.height
      && initCoor.y3 >= ctx.canvas.height) {

     initCoor.y2 = ctx.canvas.height;
     initCoor.y3 = ctx.canvas.height;
     if (initCoor.x3 <= 300) {
      initCoor.x3 = 300;
      window.clearInterval(int);
     } else {
      initCoor.x3 -= 10;
     }

    } else {
     initCoor.y2 += 40;
     initCoor.y3 += 40;
    }
    draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2,
      initCoor.y2, initCoor.x3, initCoor.y3, initCoor.x4,
      initCoor.y4, '#000');
   }
  }

  initCanvas();
  draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2, initCoor.y2,
    initCoor.x3, initCoor.y3, initCoor.x4, initCoor.y4, '#000');

  let
  int = window.setInterval(setAnimate, 50);
 }

body {
  background-color: lightblue;
}
#canvascontainer
{
 position: absolute;
 width: 360px;
 height: 360px;
  z-index: 2;
}
#image
{
 position: absolute;
 width: 360px;
 height: 360px;
  z-index: 3;
}
#canvascontainer2
{
 position: absolute;
 width: 360px;
  left: 300px;
 height: 360px;
  z-index: 2;
}

      

      This is the problem

user_6002078 · Answer

Take a look. I simplified your animation logic. I made a huge trapezium of the desired shape. It starts off-screen and it is simply translated to the left.

I also made your "reset" button, moving the initCanvas() outside your StartAnimation(), and calling it when the button is pressed.

It may not be exactly your desired result, but I think you can continue more easily from this point.

function initCanvas() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillStyle = 'transparent';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function StartAnimation() {

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let initCoor = {
        x1: ctx.canvas.width,
        y1: 0,

        x2: (4 / 3) * ctx.canvas.width,
        y2: ctx.canvas.height,

        x3: (5 / 3) * ctx.canvas.width,
        y3: ctx.canvas.height,

        x4: (5 / 3) * ctx.canvas.width,
        y4: 0,

    };
    function draw_triangle(x1, y1, x2, y2, x3, y3, x4, y4, color) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.lineTo(x4, y4)
        ctx.fillStyle = color;
        ctx.fill();
    }
    function setAnimate() {
        initCoor.x1 -= 10;
        initCoor.x2 -= 10;
        initCoor.x3 -= 10;
        initCoor.x4 -= 10;
        if (initCoor.x2 <= 100) { window.clearInterval(int); }
        draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2,
            initCoor.y2, initCoor.x3, initCoor.y3, initCoor.x4,
            initCoor.y4, '#000');
    }

    initCanvas();
    draw_triangle(initCoor.x1, initCoor.y1, initCoor.x2, initCoor.y2,
        initCoor.x3, initCoor.y3, initCoor.x4, initCoor.y4, '#000');

    let int = window.setInterval(setAnimate, 50);
}

body {
  background-color: lightblue;
}
#canvascontainer
{
 position: absolute;
 width: 360px;
 height: 360px;
  z-index: 2;
}
#image
{
 position: absolute;
 width: 360px;
 height: 360px;
  z-index: 3;
}
#canvascontainer2
{
 position: absolute;
 width: 360px;
  left: 300px;
 height: 360px;
  z-index: 2;
}

      

      This is the problem

How to make the javascript shape look the same as in the image and how to clear a javascript canvas shape after animation has ended?

1 Answers