DEV Community

Chinwendu Agbaetuo
Chinwendu Agbaetuo

Posted on

1 1 1 1 1

JavaScript Quiz - Part 2

Create nested rectangles on a canvas using a loop, so you only need to write the calls to ctx.strokeStyle and ctx.strokeRect once.

Solution

const canvasRects = [
  {
    color: "orange",
    sides: [20, 20, 180, 80],
  },
  {
    color: "red",
    sides: [30, 30, 160, 60],
  },
  {
    color: "green",
    sides: [40, 40, 140, 40],
  },
  {
    color: "blue",
    sides: [50, 50, 120, 20],
  },
];

let canvas = document.querySelector("#canvas");
let ctx = canvas.getContext("2d");

for (let rect of canvasRects) {
  let { sides } = rect;
  ctx.strokeWidth = 2;
  ctx.strokeStyle = rect.color;
  ctx.strokeRect(sides[0], sides[1], sides[2], sides[3]);
}
Enter fullscreen mode Exit fullscreen mode

Result

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up