iamsainikhil/randomFigures.html

## randomFigures.html
<!DOCTYPE html>
<html>
	<head>
		<title>Random Figures</title>
    <style>
      .canvas-wrapper {
          display: flex;
          margin: 10px auto;
      }

      #playground:hover {
          cursor: pointer;
      }
    </style>
	</head>
	<body>
	    <div class="canvas-wrapper">
        <canvas id="playground"></canvas>
    </div>
		<script>
		    var canvas = document.getElementById('playground');
		    var ctx = canvas.getContext('2d');

		  function randomColor() {
              var letters = '0123456789ABCDEF';
              var color = '#';
              for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
              }
              return color;
          }

          function randomNumber(limit) {
              const n = Math.floor(Math.random() * limit);
              return n;
          }

		  function drawRectangle() {
		        ctx.fillStyle = randomColor();
		        ctx.fillRect(50, 50, 200, 150);
		  }

		  function drawSquare() {
		        ctx.fillStyle = randomColor();
		        ctx.fillRect(50, 50, 100, 100);
		  }

		  function drawCircle() {
		      ctx.fillStyle = randomColor();
		      ctx.strokeStyle = ctx.fillStyle;
		      ctx.beginPath();
    		  ctx.arc(50, 100, 50,0, 2*Math.PI);
    		  ctx.stroke();
    		  ctx.fill();
		  }

		  function randomFigure() {
		      // to clear canvas everytime before it is re-rendered
		      canvas.width = canvas.width;
		      // to translate canvas to random x and y co-ordinates
		      canvas.style.transform = `translate(${randomNumber(250)}px,     ${randomNumber(250)}px)`;
		      const number = Math.floor(Math.random() * 3);
		      if (number === 0) {
        		  drawRectangle();
    		  } else if (number === 1) {
    		      drawCircle();
    		  } else {
    		      drawSquare();
    		  }
		  }


		  setInterval(randomFigure, 1000);
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Random Figures</title>
	<style>
	.canvas-wrapper {
	display: flex;
	margin: 10px auto;
	}

	#playground:hover {
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div class="canvas-wrapper">
	<canvas id="playground"></canvas>
	</div>
	<script>
	var canvas = document.getElementById('playground');
	var ctx = canvas.getContext('2d');

	function randomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}

	function randomNumber(limit) {
	const n = Math.floor(Math.random() * limit);
	return n;
	}

	function drawRectangle() {
	ctx.fillStyle = randomColor();
	ctx.fillRect(50, 50, 200, 150);
	}

	function drawSquare() {
	ctx.fillStyle = randomColor();
	ctx.fillRect(50, 50, 100, 100);
	}

	function drawCircle() {
	ctx.fillStyle = randomColor();
	ctx.strokeStyle = ctx.fillStyle;
	ctx.beginPath();
	ctx.arc(50, 100, 50,0, 2*Math.PI);
	ctx.stroke();
	ctx.fill();
	}

	function randomFigure() {
	// to clear canvas everytime before it is re-rendered
	canvas.width = canvas.width;
	// to translate canvas to random x and y co-ordinates
	canvas.style.transform = `translate(${randomNumber(250)}px, ${randomNumber(250)}px)`;
	const number = Math.floor(Math.random() * 3);
	if (number === 0) {
	drawRectangle();
	} else if (number === 1) {
	drawCircle();
	} else {
	drawSquare();
	}
	}


	setInterval(randomFigure, 1000);
	</script>
	</body>
	</html>