How to make canvas shape circle?
How to make canvas shape circle?
1 answer
by
haylee.mertz ,
4 months ago
@domenico
To make a circle shape on a canvas, you can use HTML5 and JavaScript. Here is a simple example of how to create a circle shape on a canvas:
- Create an HTML file with a canvas element:
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Canvas Circle</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> </html> |
- Add JavaScript code to draw a circle on the canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html>
<html>
<head>
<title>Canvas Circle</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.closePath();
</script>
</body>
</html>
|
- Save the file and open it in a web browser to see the circle shape drawn on the canvas.
You can customize the size, color, and position of the circle by modifying the values of centerX, centerY, radius, and fillStyle properties in the JavaScript code.