HTML5 Canvas Cookbook

Transforming a circle into an oval

One of the most common applications of the scale transform is to stretch a circle horizontally or vertically to create an oval. In this recipe, we'll create an oval by translating the canvas context, stretching it horizontally, and then drawing a circle.

How to do it...

Follow these steps to draw an oval:

1. Define a canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. Push the current transformation state, which is the default state, onto the state stack:

       context.save(); // save state

3. Define the dimensions of the circle:

    var centerX = 0; var ...