JSON Review

JSON or JavaScript Object Notation is how we can store and transport information between our scripts. We have used this in a couple of assignments. Now you will create your own.

{"bikes":[{"manufacturer" : "Santa Cruz",
    "      model" : "5010"},
        {"manufacture":"Specialized",
        "model":"Stump Jumper"}]}

<html>
    <head>
        <title>Canvas</title>
         <style>
        #myCanvas{
            border:black;
            border-style: solid;
            border-width: 2px;
            
        }
    </style>
    </head>
   
    <body>
        <canvas id="myCanvas" height="600" width="800"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var x = 50;
            var y = 50;
            ctx.fillStyle = "#0000FF";
            drawSquare();

            function update()
            {
                
                drawSquare();
            }

            function drawSquare()
            {
                ctx.fillRect(x, y, 20, 20);
            }

        </script>
    </body>
</html>

Can you change the JSON above, update it to create new squares? Remember, start with just one square and then add more.