HTML5 Game - Random Circle Generator

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Circle

Description

Random Circle Generator

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { //from ww  w  .  j  a  va 2 s  .c om
  border: 1px solid #000; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas" width="200" height="200">Did You Know: Every time 
        you use a browser that doesn't support HTML5
      </canvas> 
      <script> 

let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
  
let cycles = 10, i = 0; 
for (i = 0; i < cycles; i++) { 
  let randX = getRandomIntegerBetween(50, 150); 
  let randY = getRandomIntegerBetween(50, 150); 
  let randRadius = getRandomIntegerBetween(10, 100); 
  myContext.beginPath(); 
  myContext.arc(randX, randY, randRadius, 0, 6.3); 
  randStroke(); 
} 
  
function getRandomIntegerBetween(min, max) { 
  return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
  
function getRandRGB() { 
  let randRed = getRandomIntegerBetween(0, 255); 
  let randGreen = getRandomIntegerBetween(0, 255); 
  let randBlue = getRandomIntegerBetween(0, 255); 
  return 'rgb(' + randRed + ', ' + randGreen + ', ' + randBlue + ')'; 
} 
  
function randStroke() { 
  myContext.lineWidth = getRandomIntegerBetween(1, 10); 
  myContext.strokeStyle = getRandRGB(); 
  myContext.stroke(); 
} 
      </script> 
    </body> 
</html>

Related Topic