Question 54544 in Javascript Question posted in
A very good W3school tutorial can be found here.

Draw multiple circles inside multiple squares with javascript

I need to draw multiple circles inside multiple squares like in the picture below:

enter image description here

I only managed to draw multiple circles inside each other and multiple squares inside each other but cannot figure out how to place them as it is on the picture

This is what I have currently

function drawSquare() {
  var canvas = document.getElementById("Square");
  if (canvas.getContext) {
    var square = canvas.getContext("2d");

    square.fillStyle = "red";
    square.fillRect(0, 0, 500, 500);

    square.fillStyle = "yellow";
    square.fillRect(50, 50, 400, 400);

    square.fillStyle = "blue";
    square.fillRect(100, 100, 300, 300);

  }
}



function drawRedCircle() {
  var canvas = document.getElementById("Circle");
  if (canvas.getContext) {
    var circle = canvas.getContext("2d");

    circle.beginPath();
    circle.arc(250, 250, 125, 0, Math.PI * 2, );
    circle.fillStyle = "red";
    circle.fill();
    circle.stroke();
    circle.closePath();

    circle.beginPath();
    circle.arc(250, 250, 75, 0, Math.PI * 2, );
    circle.fillStyle = "yellow";
    circle.fill();
    circle.stroke();
    circle.closePath();


    circle.beginPath();
    circle.arc(250, 250, 25, 0, Math.PI * 2, );
    circle.fillStyle = "blue";
    circle.fill();
    circle.stroke();
    circle.closePath();
  }
}
<canvas id="Square" width="500" height="500" style="border: 5px solid #FF0000;">
Your browser does not support the Canvas tag. </canvas>

Could someone please advise me on how to places these circles inside the squares? Pretty please

Tags:

2

Answers


  1. 0

    Just put everything on one canvas.

    Currently, you code says, get a canvas with an id of square and put squares on it. Then get a canvas with an id of circle and put circles on it. Instead, just use one canvas and draw both the squares and circles on it.

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

function draw() {
  ctx.fillStyle="red";
  ctx.fillRect(0, 0, 500, 500);

  ctx.fillStyle="yellow";
  ctx.fillRect(50, 50, 400, 400);

  ctx.fillStyle="blue";
  ctx.fillRect(100, 100, 300, 300);

  ctx.beginPath();
  ctx.arc(250, 250, 125, 0, Math.PI * 2,);
  ctx.fillStyle = "red";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(250, 250, 75, 0, Math.PI * 2,);
  ctx.fillStyle = "yellow";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(250, 250, 25, 0, Math.PI * 2,);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.stroke();
  ctx.closePath();
    
}

draw()
    <canvas id="canvas" width="500" height="500" style="border: 5px solid #FF0000;">
Your browser does not support the Canvas tag. </canvas>
    Login or Signup to reply.
  2. 0
    • Use a single ID selector like id="square" on your canvas Element
    • Don’t hardcode variables inside functions, instead create two reusable functions and call them by passing different argument values i.e: const drawSquare = (xCenter, yCenter, size, color) => {
    const ctx = document.querySelector `#canvas`.getContext `2d`;

const drawSquare = (xCenter, yCenter, size, color) => {
  ctx.beginPath();
  ctx.fillStyle = color ?? "#000";
  ctx.fillRect(xCenter - size / 2, yCenter - size / 2, size, size);
  ctx.closePath();
};

const drawRedCircle = (xCenter, yCenter, radius, color) => {
  ctx.beginPath();
  ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2);
  ctx.fillStyle = color ?? "#000";
  ctx.fill();
  ctx.closePath();
};

// Draw!

drawSquare(250, 250, 500, "red");
drawSquare(250, 250, 400, "yellow");
drawSquare(250, 250, 300, "blue");

drawRedCircle(250, 250, 125, "red");
drawRedCircle(250, 250,  75, "yellow");
drawRedCircle(250, 250,  25, "blue");
    <canvas id="canvas" width="500" height="500">
Your browser does not support the Canvas tag. </canvas>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search