Project 2

by Susan Delgado

HTML

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

    <h1>Project 2</h1>

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

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

JavaScript

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 = length/2;

        x += length;

        drawSquare(x,y,length, level,context);

    }

}




$(document).ready(function() {

    var c = document.getElementById("myCanvas");

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

    var x = 10;

    var y = 10;

    var length = 200;

    var level = 0;

    drawSquare(x, y, length, level, context);

})