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: