How to draw a Hexagonal form on a web page

Today I will teach you How to draw a Hexagonal form on a web page. Using HTML5 and the canvas tag, create a hexagon. If you wish to draw a hexagonal form on a web page, HTML5’s canvas tag and javascript provide a sleek way to do it.

Although this example lacks the CSS styling choices of the previous hexagon drawing example, it is simpler to use in terms of additional programming operations you’ll need to perform if you’re scripting it for a game. It’s logical to presume, for example, that something is supposed to be placed “within” the shape, as shown above.

Example of a Tag and Code

Below is the code that was used to build the example. The canvas element is the first to be produced on the DOM. The class “my canvas” has some CSS style rules applied to it to match the color scheme, but it also shows that you can apply CSS styling to the canvas using the class and style HTML properties. 

The button adjacent to the canvas activates the example javascript code. To keep track as to whether the click will “clear” or “draw” in the canvas, the button employs a toggle state.

This is what this example accomplishes.

Make a canvas tag in Photoshop.

Using javascript, get a reference to the canvas tag.

Create a drawing environment (“2D” meaning two-dimensional).

Set the variables for x and y.

Trace the form of a hexagon by changing the x and y coordinates.

Draw lines for any legs that need to be shown.
Set the characteristics of the drawing style, such as color and line thickness.

Set the timer for the drawing to start.

Text should be added.

Canvas Tag:

.my_canvas {
    background: #eee; 
    width: 200px; 
    height: 200px; 
    border: 1px #ccc solid;

<canvas id="board" class="my_canvas"></canvas> 

Code Example
<script type="text/javascript">
function clearCanvas( context, canvas ) {
    context.clearRect( 0, 0, canvas.width, canvas.height );


function draw (obj) {
    var canvas, context, x, y, xx, yy, x0, y0;

    // get a reference to the board, and the drawing context
    canvas  = document.getElementById('board');
    if ( canvas && canvas.getContext ) {
        context = canvas.getContext('2d');

    } else {
        // unsupported browser?
        alert("Couldn't get a reference to the HTML 5 canvas."
          + "\nYour browser doesn't appear to support this page.");


    // CLEAR 
    // note: the button toggles to support draw or clear...this does the clear operation
    if( obj.value.match(/clear/i) ) {
        obj.value  = 'Draw'; 

        clearCanvas( context, canvas );

        // if we're clearing the canvas, early return to avoid running the drawing code below

    // DRAW 
    // note: the button toggles to support draw or clear...this does the draw operation
    obj.value = 'Clear';

    // set up the variables    
        x0 = 10; // starting values
        y0 = 10;
        x  = x0; // operating vars
        y0 = 10;
        xx = 50; // size of the legs of the shape
        yy = 25;

    // perform the moves and line drawing
        x =  x0; 
        y =  y0; 
        context.moveTo( x, y );

        x += xx; 
        y +=  0; 
        context.moveTo( x, y );

        x += xx; 
        y +=  0; 
        context.lineTo( x, y );

        x += xx; 
        y += yy; 
        context.lineTo( x, y );

        x += ( xx * -1 ); 
        context.lineTo( x, y );

        x += ( xx * -1 ); 
        y += 0; 
        context.lineTo( x, y );

        x += ( xx * -1 ); 
        y += ( yy * -1 ); 
        context.lineTo( x, y );

        x += xx; 
        y+=( yy * -1 ); 
        context.lineTo( x, y );

    // now render it per our style definitions
        context.strokeStyle = "rgba(0,0,0,1)";

    // add some text
        context.font = '1.1em Arial';
        context.fillText('Got Hexagon?', 28, 40);

%d bloggers like this: