EN
JavaScript - how to draw ellipse on canvas element?
10 points
Using JavaScript it is possible to draw ellipse in the following way:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
function drawCircle(x, y, radiusX, radiusY, rotation) {18
context.beginPath();19
context.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);20
context.stroke();21
}22
23
var deg = 20;24
var rad = deg * (Math.PI / 180.0);25
26
// Eclipse paramters:27
// x=100; y=100; 28
// width=80; height=40; 29
// clockwiseRotation=20 degrees // rotation according to point (x, y)30
drawCircle(100, 100, 80, 40, rad);31
32
</script>33
</body>34
</html>