A CodePen by Tim Smith. Picky Choosy - Example of fun with canvas

index.html

<div role="main" class="container">
           <center>
               <span id="option-box">
                   <select id="number">
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="7">7</option>
                       <option value="8">8</option>
                       <option value="9">9</option>
                       <option value="10">10</option>
                       <option value="11">11</option>
                       <option value="12">12</option>
                       <option value="13">13</option>
                       <option value="14">14</option>
                       <option value="15">15</option>
                       <option value="16">16</option>
                   </select>
                   
                   <select id="color">
                       <option value="#000">Black</option>
                       <option value="#fff">White</option>
                       <option value="#f00">Red</option>
                       <option value="#00f">Blue</option>
                       <option value="#0f0">Green</option>
                       <option value="#ff0">Yellow</option>
                       <option value="#FFA500">Orange</option>
                       <option value="#800080">Purple</option>
                       <option value="#00FFFF">Aqua</option>
                   </select>
                   
                   <select id="size">
                       <option value="1">Small</option>
                       <option value="3">Medium</option>
                       <option value="6">Large</option>
                       <option value="9">X-Large</option>
                       <option value="12">XX-Large</option>
                   </select>
                   
                   <select id="shape">
                       <option value="1">Square</option>
                       <option value="2">Circle</option>
                       <option value="3">Triangle</option>
                   </select>
                   
                   <button id="go">Go</button>
                   
                   <button id="clear">Clear</button>
               </span>
           </center>
           
           <center>
               <canvas id="canvas" height="400" width="400 " style="padding:1em;margin:0 auto;border:1px solid #000;margin-top:1em;background:#ddd;"></canvas>
           </center>
       </div>

script.js

jQuery.noConflict();
(function($) {
   $("#clear").click(function() {
       console.log("clear!");
       var c=document.getElementById("canvas");
       var context=c.getContext("2d");
       context.clearRect(0, 0, canvas.width, canvas.height);
   });

   function square(offset, size){
       var color = $("#color option:selected").val();
       var c=document.getElementById("canvas");
       var context=c.getContext("2d");

       context.fillStyle = color;
       context.fillRect(offset,0,size,size);
   }

   function circle(offset, size){
       var color = $("#color option:selected").val();
       var canvas = document.getElementById("canvas");
       var context = canvas.getContext("2d");
       var radius = size / 2;
       var x = offset + radius;
       var y = radius;

       context.beginPath();
       context.arc(x, y, radius, 0, 2 * Math.PI, false);
       context.lineWidth = 1;
       context.fillStyle = color;
       context.fill();

       //context.fillStyle="#ff0000";
       //context.fillRect(x-1, y-1, 2, 2);
   }

   function triangle(offset, size){
       console.log(offset);
       var color = $("#color option:selected").val();
       var canvas = document.getElementById("canvas");
       var context = canvas.getContext("2d");
       var width = size;
       var height = size;

       // Draw a path
       context.beginPath();
       //top of triangle
       context.moveTo(offset + width/2, 0);
       //top to right
       context.lineTo(offset + width, size);
       //bottom of triangle
       context.lineTo(offset, size);
       context.closePath();

       // Fill the path
       context.fillStyle = color;
       context.fill();
   }

   $("#go").click(function() {
       var number = parseInt($("#number option:selected").val());
       var shape = $("#shape option:selected").val();
       var size = parseInt($("#size option:selected").val()) * 10;
       var i = 0;
       var shift = 1;
       var position = 0;
       var padding = size * 0.5;

       while(i < number){
           switch(shape){
               case '1':
                   square(position, size);
                   break;
               case '2':
                   circle(position, size);
                   break;
               case '3':
                   triangle(position, size);
                   break;
           }
           i++;
           position = position + size + padding;
       }
   });
})(jQuery)

style.css

h1 {
   padding:21px;
   display: block;
   font-size: 2em;
   font-weight: bold;
   font-family: sans-serif;
}