Project Two section 2 part c

by Susan Delgado

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <h1>Project Two section 2 part C</h1>
​With four branches and 7 levels.<br/>

    <script src="proj2.js"></script>

    <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

JavaScript

/* ======================================================================
    SETUP COPY TEACHERS CODE IN JSFIBBLE Project 2
    STEP 1 : Test one Branch in jsFiddle Project Two section 2 part a
    STEP 2 : Test one Branch in jsFiddle Project Two section 2 part a
    STEP 3 : Test one Branch in jsFiddle Project Two section 2 part B
    STEP 4 : Test one Branch in jsFiddle Project Two section 2 part c
    STEP 5: If neccary start new jsfiddle for variations
==================================================================== */

//levels of recursion
const maxLevels = 7;
/* =========================
STARTUP CODE
========================= */

$(document).ready(function() {

    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");

    let startX = c.width / 2;
    let startY = c.height / 2;
    // let startAngle = 0;
    let startLength = 100;
    let startLevel = 0;

/* ================================================
       calls to drawBranch() 
   ================================================  */
    drawBranch(startX, startY, 0,   startLength, startLevel, context);
    // drawBranch(startX, startY, 90,  startLength, startLevel, context);
    // drawBranch(startX, startY, -90, startLength, startLevel, context);
    // drawBranch(startX, startY, 180, startLength, startLevel, context);

});
/* =========================
DRAW SQUARE (given by professor)
========================= */

function drawSquare(x, y, length, level, context){

    if (level < 4){

        context.fillStyle = "rgba(0,0,0,1)";

        if (level == 1)
            context.fillStyle = "rgba(150,0,0,1)";
        else if (level == 2)
            context.fillStyle = "rgba(0,150,0,1)";
        else if (level == 3)
            context.fillStyle = "rgba(0,0,150,1)";
        else
            context.fillStyle = "rgba(50,50,50,1)";

        context.fillRect(x,y,length,length);

        level += 1;
        length =...