Need help in Blank rectangular and animation creation

[Ali_ahsan]

I have this problem and i tried alot but unable to do even a single point. Please any one can help me to do this.

You are required to create an animation that follows the requirements detailed below.

1.The animation should start with two separate white squares.

2.The squares should slowly change color from white to red.

3.Next, the red squares should slowly move towards the centre of page and merge.

4.One square should then slowly rotate 45 degrees, forming an eight-pointedstar.

5.The eight-pointed star should then spin rapidly clockwise for ten seconds.

6.It should then stop and spin anticlockwise for ten seconds.

7.It should then then stop.

8.The squares should then fade from the screen.

[JeremyLT]

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding

[Ali_ahsan]

I have tried lot of codes. But unable to draw square.

Like i tried
// Draw a rectangle at location (30, 20) with a width and height of 55.
rect(30, 20, 55, 55);

I have HTML page. Where i have to draw squares.

[Ali_ahsan]

I searched on google but found codes for asterik print. But i need solid square.

[lasjorg]

Considering this seems like a test of some kind surely you have been given some learning material to help you?

I assume you are supposed to use Canvas for this?

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

[Ali_ahsan]

I just checked. Let me explore in detail.

[Ali_ahsan]

I have created the squares. And have rotated the one rectangle and as well. But i want to move other rectangular gradually. I also tried with time function but nothing.
function draw() {
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);

  ctx.strokeStyle = 'black';
  ctx.strokeRect(10, 10, 100, 100);
ctx.rotate(20 * Math.PI / 180);

ctx.strokeStyle = 'black';
  ctx.strokeRect(150, 10, 100, 100);

}

[lasjorg]

Is that your own draw function (you are not using p5js right?)

@Ali_ahsan

I also tried with time function but nothing.

I see no calls to the draw function so I’m not sure how you are using it? Did you look at the animation part of the Canvas MDN article?

Post the code you wrote with the animation attempt so we can see it.