Fancy effects of Canvas ellipse method

less than 1 minute read

This is what I like the most. Write just one line of code to get amazing results! Experiment on your own by changing the following parameters:

 ctx.beginPath() ;
  var x             // The X coordinate (e.g. canvas.width/2)
  var y             // The Y cooordinate (e.g. canvas.height/2)
  var rx            // The X radius
  var ry            // The Y radius
  var rotation      // The rotation of the ellipse (in radians)
  var start         // The start angle (in radians)
  var end           // The end angle (in radians)
  var anticlockwise // The direction the ellipse is drawn (optional)
  
ctx.ellipse(x, y, rx, ry, rotation, start, end, anticlockwise);

ctx.stroke() ;

Here are some examples: ellipse1, ellipse2, ellipse3, ellipse4, ellipse5, ellipse6 (my favourite), ellipse7, ellipse8, ellipse9, random ellipse.

When you add random fill color and some transparency, you can easily draw Picasso-style paintings. (Please wait 20 sec. to complete.)

Unfortunatelly, the ellipse function is now only supported by Chrome, Safari and Opera.

Tags:

Updated: