Overview

You will create a filling pattern in the Canvas. The pattern draws a series of rombuses that completely fill the Canvas. Put together an HTML file and a JavaScript file. Your assignment folder is to be called Assignment$6.$ You will name your JavaScript file pattern.js$.$ Your JavaScript file must be placed within the scripts folder in your development folder.

Your complete pattern will look this:

a$)$ This canvas might not have integer dimensions. You will need to calculate its dimensions based on the number of rhombuses drawn. Remember the canvas needs a solid border in black colour.

b$)$ You will create this matrix$-$like pattem by drawing rhombuses with side $25$px$.$ All sides have equal length. As it is matrix$-$like drawing, you will need two loops to draw all the thombuses. Keep in mind that with a side $25$px$,$ the internal diagonal $($edge to edge$)$ of the hombus is longer than that. Calculating this value is key for getting the canvas dimensions and spacing the rhombuses correctly.

c$)$ The colour changes in every row$/$column$.$ In the columns the figures get their colours following a Red$-$Green$-$Blue sequence $($RGB$).$ This means that column $1$ has a varying red value, no green and no blue. Column $2$ has green and no red$/$blue components. The same applies to column $3.$ As we have only $3$ main colours, column $4$ will be red and so on$.$ Row to row the amount of colour will change in increments of $25$px $($the same length the side of the figures have$).$ String concatenation might help you generate your colours easily.

Note:

Your code is expected to be readable, that means having a well$-$organized code with proper indentation and following recommended practices $($e$.$g$.,$ variable naming$).$

Your solutions will be inspected and compared. Make sure your code is authentic. Any attempt of cheating will invalidate your solution.

Your solution must be submitted as a single ZIP file. The recommendation is to zip your entire folder. If you do not zip your folder, you will receive ZERO for this assignment.

Submission and grading

When you are finished, submit your zip file to BrightSpace. Make sure your submission happens before the deadline, remember that late submissions are not possible. Grades will be calculated as follows:

$(4)$ Structure and content. $($Styling$,$ indentation, readability, file placement$)$

$(10)$ Canvas dimensions

$(56)$ Rhombus placement $($Canvas and other rhombuses$)$

$(30)$ Rhombus colour $($correct pattern$)$

We need yto use nested loop for the rhombus, then translate and rotate and please don't change the coordinates just play with yhthe the transltee $.$ then use if condition for the vatianvariant of volour