Question

//Using the canvas element of HTML and JavaScript, draw 5 circular shapes within each other like a bullseye but each circle with a different color. Please use a for loop. In the center circle it should say "bulls eye".

Answer 1

Canvas.html:-

<canvas id='my-canvas' width='800' height='700'>

</canvas>

style.css:-

#my-canvas{
border:1px solid black;
}

BullEye.js:-

var canvasElem = document.getElementById('my-canvas');
var ctx = canvasElem.getContext('2d');
//Starting the function
function drawBullseye(x, y){
  
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x - 30, y, 160, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 30, y, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x - 30, y, 140, 0, 2 * Math.PI);
ctx.fill();
  
  
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(x - 30, y, 110, 0, 2 * Math.PI);
ctx.fill();
  
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x - 30, y, 90, 0, 2 * Math.PI);
ctx.fill();
  
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 30, y, 60, 0, 2 * Math.PI);
ctx.fill();
  
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(x - 30, y, 40, 0, 2 * Math.PI);
ctx.fill();
  
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 30, y, 15, 0, 2 * Math.PI);
ctx.fill();}

// Drawing Bulls eye
drawBullseye (400,250)