EN
JavaScript - how to draw ellipse on canvas element?
10
points
Using JavaScript it is possible to draw ellipse in the following way:
1. ellipse() method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="200" height="200"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
function drawCircle(x, y, radiusX, radiusY, rotation) {
context.beginPath();
context.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);
context.stroke();
}
var deg = 20;
var rad = deg * (Math.PI / 180.0);
// Eclipse paramters:
// x=100; y=100;
// width=80; height=40;
// clockwiseRotation=20 degrees // rotation according to point (x, y)
drawCircle(100, 100, 80, 40, rad);
</script>
</body>
</html>