0

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

2
Contributors
3
Replies
17
Views
4 Years
Discussion Span
Last Post by IIM
0

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???

0

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

0

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

Edited by IIM

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.