EN
JavaScript - how to fill circle with certain color on canvas element?
5 points
Simple solution:
xxxxxxxxxx
1
context.fillStyle = color;
2
3
context.beginPath();
4
context.arc(x, y, radius, 0, 2 * Math.PI);
5
context.fill();
Using JavaScript it is possible to draw filled circle with certain color in following way.
xxxxxxxxxx
1
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 fillCircle(x, y, radius, color) {
18
19
context.fillStyle = color;
20
21
context.beginPath();
22
context.arc(x, y, radius, 0, 2 * Math.PI);
23
context.fill();
24
}
25
26
fillCircle(100, 100, 80, 'yellow');
27
28
</script>
29
</body>
30
</html>