title: How to draw multiple random obects using canvas in javascript
body: <p>Using canvas I need to create 4 other random shapes to appear in random sizes and random locations. So far I have random circles. But I cant Figure out how to get other shapes as well.</p>
  
  <p>in the body i have </p>
  
  <pre><code>&lt;canvas width='600' height='200' id='artCanvas'&gt;&lt;/canvas&gt;
  &lt;form&gt;
    &lt;input type='button' id='artButton' value='New Masterpiece'&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Using this code I need to create multiple other shapes in the same way the circles are being created randomly.</p>
  
  <pre><code>&lt;script&gt;
    function makeTitle() {
    //generate the title for your masterpiece
    var lines =[['Meditative','Objective','Reflective'['Ellipses','Tranformation', 'State', 'Emotion', 'Composition']['I', 'II', 'III', 'IV','V']];
    var title = '';
    for (var i=0; i&lt;lines.length; i++) {
      var random = Math.floor(Math.random() * lines[i].length);
      title += lines[i][random] + ' ';
    };
  return(title);
  }
  function artHandler() {
    var title = makeTitle();
    alert(title);
    var canvas = document.getElementById('artCanvas');
    var context = canvas.getContext('2d');
    fillBackgroundColor(canvas, context);
    var colors = ['white', 'yellow', 'blue', 'red'];
    for (var i = 0; i &lt; 20; i++) {
      var color = colors[Math.floor(Math.random() * colors.length)];
      drawCircle(canvas, context, color); 
    }
    drawText(canvas, context, title);
    }
  function fillBackgroundColor(canvas, context) {
    var colors = ['white', 'yellow', 'blue', 'red'];
    var bgColor = colors[Math.floor(Math.random() * colors.length)];
    context.fillStyle = bgColor;
    context.fillRect(0, 0, canvas.width, canvas.height);
  }
  function degreesToRadians(degrees) {
    return (degrees * Math.PI)/180;
  }
  // Draws a circle at a random location
  function drawCircle(canvas, context, color) {
    var radius = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    context.beginPath();
    context.arc(x, y, radius, 0, degreesToRadians(360), true);
    context.fillStyle = color;
    context.fill();
  }
  function drawText(canvas, context, title) {
    context.fillStyle = 'black';
    context.font = 'bold 1em sans-serif';
    context.textAlign = 'right';
    context.fillText(title, canvas.width-20, canvas.height-40);
  }
  window.onload = function() {
  var button = document.getElementById('artButton');
  button.onclick = artHandler;
  }
  &lt;/script&gt;
  </code></pre>