title: Olympics rings with JavaScript on HTML5 canvas
body: <pre><code>&lt;center&gt;&lt;canvas id=c1 width=400 height=400&gt;&lt;/canvas&gt;
  &lt;script&gt;
      ctx = c1.getContext('2d')
      ctx.fillStyle = '#7ef' // draw blue background with the darker frame
      ctx.fillRect(0, 0, 400, 400)
      ctx.fillStyle = '#9ff'
      ctx.fillRect(10, 10, 400-20, 400-20)
  
      var X = 75, W = 50, G = 20
      ctx.lineWidth = 10
      var colors = ['blue', 'black', 'red', 'yellow', 'green']
      var args = [
          [X,X,W],
          [X+W+W+G,X,W],
          [X+W+W+G+W+W+G,X,W],
          [X+W+G/2,X+W,W],
          [X+W+G/2+W+W+G,X+W,W]]
  
      while (colors.length &gt; 0) {
          ctx.strokeStyle = colors.shift()
          ctx.beginPath()
          ctx.arc.apply(ctx, args.shift().concat([0,Math.PI*2,true]))
          ctx.stroke()
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Above is my code at this moment. My goal is to amuse children, there are 12 year old boys, but my code is not amazing enough, is it possible to make it less boring by removing all hand-coded coordinates? Also it would be cool to make rings "interconnected", but how to achieve that?</p>
  
  <p>Here is the output of my current code:</p>
  
  <p><img src="https://i.stack.imgur.com/rzaic.png" alt="enter image description here"></p>
  
  <p>And this is what Olympics rings are supposed to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/34LGA.jpg" alt="enter image description here"></p>