Position content on canvas

Question

dhani09 3 Newbie Poster

11 Years Ago

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

html-css javascript

2 Contributors
3 Replies
200 Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by IIM

IIM 163 Master Poster

11 Years Ago

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

Reply to this topic

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.

dhani09 3 Newbie Poster · Answer 1 · 2013-04-24T05:06:10+00:00

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

IIM 163 Master Poster · Answer 2 · 2013-05-01T15:51:55+00:00

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