Center align a polygon inside an html canvas

Question

I'm dynamically drawing a polygon inside a canvas using this code I found. (the coordinates are provided by the user)

https://stackoverflow.com/a/4841057/1667856

Is it possible to move this polygon into the center of a canvas after/before it has been created?

I found out that you can use the canvas translate() method to move shapes around but I can't seem to figure out how to recalculate the coordinates so that the polygon will automatically appear in the middle of the canvas and not on its original coordinates.

markE · Accepted Answer · 2014-02-26T17:35:38.080

As you've probably discovered, html canvas is just a pixel drawing.

The shapes you draw on the canvas are just like dried paint. They can't be moved or remolded into another shape.

The typical way of "moving" a shape is to clear the canvas and redraw the same shape with different coordinates.

You can create those coordinates by adding an offsetX and offsetY to all the polygon coordinates.

Alternatively (more simply) you can translate the coordinates.

Important note: context.translate does not just move the coordinates of your polygon. It changes every coordinate for all NEW drawings.

ctx.translate(50,50) "moves" the canvas's origin to 50,50. That means if you start drawing your polygon at 5,5 you will visually start drawing at 50+5,50+5.

Here is example code and a Demo: http://jsfiddle.net/m1erickson/2Gm73/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");


    // calculate the middle of the canvas
    var centerX=canvas.width/2;
    var centerY=canvas.height/2;

    // just for testing: draw crosshairs on center canvas
    ctx.beginPath();
    ctx.moveTo(centerX,0);
    ctx.lineTo(centerX,canvas.height);
    ctx.moveTo(0,centerY);
    ctx.lineTo(canvas.width,centerY);
    ctx.stroke();

    // define some points for your polygon
    var poly=[ 5,5, 100,50, 50,100, 10,90 ];

    // save the canvas context in its untranslated state
    ctx.save();

    // translate the canvas
    // the context now uses centerX,centerY as its 0,0 origin
    ctx.translate(centerX,centerY);

    // draw the polygon
    ctx.beginPath();
    ctx.moveTo(poly[0], poly[1]);
    for(var i=2;i<poly.length;i+=2){
        ctx.lineTo( poly[i] , poly[i+1] )
    }
    ctx.closePath();
    ctx.fillStyle = '#f00';
    ctx.fill();

    // restore the context to its untranslated state
    // (otherwise all further drawings will be "moved"
    // just like this polygon
    ctx.restore();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

If you want your polygon to be visually centered in the canvas, you must also calculate the offset of the center of your polygon itself:

// calc the max values of x,y in the polygon and divide by 2

var centerPolyX = 100/2;  // max x comes from coordinate 100,50
var centerPolyY = 100/2;  // max y comes from coordinate 50,100

Then translate to center canvas minus the polygon center:

// move to center canvas
// but then move left and up by half the polygon's size

ctx.translate(centerX-centerPolyX,centerY-centerPolyY);

Center align a polygon inside an html canvas

1 Answers1