Home Communities
IT Knowledge
Inspiration
Languages
EN

# JavaScript - how to fill ellipse with certain color on canvas element?

7 points
Created by:
265

Simple solution:

``````context.fillStyle = color;

context.beginPath();
context.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);
context.fill();``````

Using JavaScript it is possible to draw filled ellipse with certain color in following way.

## 1. `fillStyle` property and `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 fillEllipse(x, y, radiusX, radiusY, rotation, color) {
context.fillStyle = color;
context.beginPath();
context.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);
context.fill();
}

var deg = 20;
var rad = deg * (Math.PI / 180.0);

// Eclipse paramters:
//   x=100; y=100;
//   width=80; height=40;
//   rotation=20;  //  degrees - clockwise rotation according to point (x, y)
//   color='blue'
fillEllipse(100, 100, 80, 40, rad, 'blue');

</script>
</body>
</html>``````

## See also

1. JavaScript - how to draw ellipse on canvas element?

## JavaScript - HTML5 canvas tutorial

##### 🚀
Get your tech brand or product in front of software developers.
For more information Contact us

Join