Home/ Questions/Q 6566083
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:10:27+00:00

So my problem lies as this. Im drawing polys in canvas using javascript. Im

  • 0

So my problem lies as this.
Im drawing polys in canvas using javascript. Im also trying to rotate those polys based on any given point using sin/cos. Im avoiding translate and canvas rotate. Rotation happens on mouse movement.

Thing is the results come back quite weird. My polys tend to shrink for some reason and i cant figure out why.

My guess would be somewhere around the math action sin/cos combined with how coords are set around the matrix? Maybe i should round values or ? Im not sure and too confused.

The following code is functional. If you can run the code you can get what i mean
Any help or explanation on why is this happening will be highly appreciated.
Cheers.

<script type="text/javascript">
    var set = 
    {
    canvas:'canvas',
    fps:1000/60
    }


var gObjects = [];
function deg2rads(deg) { return deg*Math.PI/180; }

function drawPoly(object) 
    {
    if (object.vertexPoints)
        {
        var ctx = document.getElementById(set.canvas).getContext('2d');
            ctx.beginPath();
            ctx.moveTo(object.vertexPoints[0][0],object.vertexPoints[0][1]);
            ctx.fillStyle = '#f00';
        for (i=1;i<object.vertexPoints.length;i++)
            {
            ctx.lineTo(object.vertexPoints[i][0],object.vertexPoints[i][1]);
            }
        ctx.closePath();
        ctx.fill();
        }
    }

function block(vertex) 
    {
    if (vertex) { this.vertexPoints = vertex; }
    }

function rotate(object,degrees) {
    vPoint = object.vertexPoints;
    for (i=0;i<vPoint.length;i++)
        {
        rads = deg2rads(degrees);
        pX= 300;
        pY= 540;
        object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
        object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;
    }
}
function mainGameLoop () 
    {
    var ctx = document.getElementById(set.canvas).getContext('2d');
        ctx.clearRect(0,0,600,600);     

        drawPoly(gObjects[0]);

    var gameTimer = setTimeout(mainGameLoop,set.fps);
    }


function iNitCanvas() {

var test = [[100,500],[500,500],[500,580],[100,580]];

var obj = new block(test);
gObjects[0] = new block(test);

mainGameLoop();

}

function mouseCoords() {
rotate(gObjects[0],-10);
}

</script>
<body onmousemove="mouseCoords();" onLoad="iNitCanvas();">
<input type="button" id="showCube" onclick="iNit();" value="GO!"/>
<canvas id="canvas" width="600" height="600" style="border:1px solid black;"></canvas>

</div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your math is fine. The culprit hides in these two lines:

    object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;

    The second line uses vPoint[i][0], which was already modified by the first line (vPoint and object.vertexPoints point to the same array.)

    Replacing these two lines with the following prevents the shrinkage:

    var point = [ vPoint[i][0], vPoint[i][1] ];
object.vertexPoints[i][0] = Math.cos(rads) * (point[0] - pX) - Math.sin(rads) * (point[1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (point[0] - pX) + Math.cos(rads) * (point[1]-pY) + pY;
    • 0