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.
Follow these steps to draw an oval:
Define a canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
Push the current transformation state, which is the default state, onto the state stack:
context.save(); // save state
Define the dimensions of the circle:
var centerX = 0; var centerY = 0; var radius = 50;
Translate the canvas context to the center of the canvas, and then scale the context width to stretch it outwards:
context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1);
Draw the circle:
context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI...