I have the following code to draw any polygon on an HTML5 canvas on a button click. The user supplies the radius, sides, x and y co-ordinates. Using the sides any regular polygon should be drawn. First we move to the perimeter using moveTo() and then draw lines using lineTo() depending on the sides.

js.js

function drawPolygon() {
var numberOfSides = parseFloat(prompt("Enter number of sides"));
var Xcenter = parseFloat(prompt("Enter x"));
var Ycenter = parseFloat(prompt("Enter y"));
var size = parseFloat(prompt("Enter radius"));

var con=document.getElementById("myCanvas");
var cxt=con.getContext("2d");

cxt.beginPath();
cxt.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          

for (var i = 1; i <= numberOfSides;i += 1) {
cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}

cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();

}
function registerEvents(){ 
var poly = document.getElementById("polygon");
poly.addEventListener( "click", drawPolygon, false); 
}
window.addEventListener('load', registerEvents, false);

The code works fine. My issue is that all drawings are positoned on the top left corner (default) of the canvas. How can i take control of the positioning of the drawings?. I want to be able to place the drawings anywhere on the canvas. Thanks

Recommended Answers

All 3 Replies

Dhani,your code is fine.It will draw polygon with the coordinates you have provided.I just chcked your code by putting x=400 and y=200 radius 10,it is drawing as expected.Why it is not working for you???

I don't know why...even with the same coordinates, i get the drawing positioned at the top left corner of the canvas..

hi dhani check the file attached.I have just checked your code and it is showing polygon at required position.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="mycss.css" rel="stylesheet" type="text/css" />

        <title>CANVAS</title>
<script>
function drawPolygon() {

var numberOfSides = parseFloat(prompt("Enter number of sides"));
var Xcenter = parseFloat(prompt("Enter x"));
var Ycenter = parseFloat(prompt("Enter y"));
var size = parseFloat(prompt("Enter radius"));
var con=document.getElementById("myCanvas");
var cxt=con.getContext("2d");
cxt.beginPath();
cxt.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
for (var i = 1; i <= numberOfSides;i += 1) {
cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();
}
function registerEvents(){ 
var poly = document.getElementById("polygon");
poly.addEventListener("click", drawPolygon, false); 
}
window.addEventListener('load', registerEvents, false);
//window.addEventListener("onload", registerEvents, false);
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid #000000;"></canvas>

        <form>
            <input id="polygon" type="button" value="Draw a rectagle" class="button2"/>   
        </form>

    </body>
</html>

6402e2fa683c8c4d01c4dd66e382cb60

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.