HTML5 Game - Transforming a circle into an oval

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Transformation Matrix

Introduction

We can use the scale transform to stretch a circle horizontally or vertically to create an oval.

The following code creates an oval by translating the canvas context, stretching it horizontally, and then drawing a circle.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
window.onload = function(){//  w  ww  .j a va 2 s  . com
    let canvas = document.getElementById("myCanvas");
    let context = canvas.getContext("2d");
    
    context.save(); // save state
    
    let centerX = 0;
    let centerY = 0;
    let radius = 50;
    
    context.translate(canvas.width / 2, canvas.height / 2);
    context.scale(2, 1);
    
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    
    context.restore(); // restore original state
    
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();
};
        </script>
    </head>
    <body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
    </body>
</html>

Note

To draw an oval on HTML5 canvas, translate the context to its desired position with the translate() method.

Then stretch the context either vertically or horizontally with the scale() method.

After that draw the circle.

Related Topic