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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more