Drawing Playground Using HTML 5 Canvas And JavaScript

Overview

 

In this article, I am going to draw a graphics for football playground using HTML5 Canvas element & JavaScript. Visually, canvas is nothing more than an HTML element but it is more powerful to draw any kind of graphics on it.

 

Basically, it is a container for graphics design on which one can draw graphics with the help of JavaScript. Similar to other HTML elements, we can set the properties like height, width, id, styles, and other attributes. We can understand this in the following image where I have mentioned the id of canvas as "canvasPlayground".

 

 

Figure: canvas

 

Story  
 

Yes, it's true. I had very less knowledge of football playground like what is penalty area, penalty spot, goal area, and so many things. So two days ago, I was studying about football playground meanwhile I saw a magnificent image of playground then there is question came into my mind - "Can I draw the same type of ground image using programming?" and I got an answer, Yes I can do.

 

There can be a different way to draw this image but for this article/solution I am using HTML5 canvas with JavaScript. 

 

 

Note

In this article, I am going to draw the same football ground with different color

 

Before Start

 

Before going to start drawing for football ground, lets know about the basics concept of canvas and it's methods which are being used to draw the objects on it. The <canvas> element creates a fixed size of drawing surface which either may be in 2d context or 3. But in this article, I am going to discuss about the 2 context only.

 

We can draw the various kind of shapes and text but in this article I will use the following only. May be in the next article I will explore more about canvas.

• Circle
  To draw circular shape over the canvas, in this article I will use circle object to draw center spot and penalty arc
  
  
• Rectangle
  we can draw rectangular share where need to show rectangular object. In this article I will use it draw sevral shape like     penalty area, goal area, main ground.
  
  
• Line
  we can draw line on canvas by using line. I will use it draw draw half-way line of the ground as well as arrow line to inicate the name of the ground area.
  
  
• Text
  We can draw text as well. So In this article I will use it to indicate the information of ground.

The <canvas> element has a method called getContext(), which is used to rendering context and its drawing functions. getContext() takes one parameter as type of context that may be either 2D or 3D.

Example

var canvasElement = document.getElementById("canvasPlayground");
var context = canvasPlayground.getContext("2d");

All latest browser have the support for canvas. I think IE8 doesn't support canvas. So by the following line of code we can check that is this browser have support of canvas or not. 

//Check is this browser has support for canvas or not
if(canvasElement.getContext){
     //This browser has support for canvas
}
else{
     //it doesn't have support for canvas
}

Some of us(beginners) may not be aware about the canvas so let's look a brief about some basic functions which will be used in this article.

 

List of canvas functions which are will be used in this article: 

• beginPath()
  It is used to create a new path after that we can move the path by using moveTo(), lineTo() or any other function.
  

  //...
  context.beginPath();
  //...

  
  
• moveTo(xPostion, yPosition)
  It is used to moves the pen to the  specified coordinates. Basically, we use this function for starting point but we can use it where we need to change the direction of path as well.
  

  context.moveTo(0,0);

• lineTo(xPostion, yPosition)
  It's used to draw straight line. This method takes two arguments, xPostion and yPosition, which are the coordinates of the line's end point
  

  //...
  context.lineTo(0,0);
  context.lineTo(100,0)
  
  //..

• fill()
  It's used to draw the solid path by filling the path area
  
  
• fillStyle()
  It's used to fill the background color
  
  
• stroke()
  It's used to draw shape with outline/border
  
  
• strokeStyle()
  It's used to fill the color of stroke outline
  
  
• lineWidth()
  It's used to change the width of stroke line
  
  
• arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise)
  To draw arcs or circles, we use the arc() or arcTo() methods.
  
  
• fillRect(xPos, yPos, width, height)
  It is used to draw  fill rectangualr shape from the specified x an y postion with mentioned  dimention(with x height)
  
  
• strokeRect(x, y, width, height)
  It is used to draw fill rectangel outline
  
  
• clearRect(x, y, width, height)
  It is use to clears the specified rectangular area by making it fully transparent.

Let us start step by step to draw football playground on canvas

 

For this article I am using Visual Studio 2013 but it's not mandatory. We can do it by using Notepad with any browsers.

 

Step1

 

Create an index.html page and replace the existing code by following lines of code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body style="margin:0 auto; background:#333; ">
    <div id="DrawingBoard" style="padding-top:25px;text-align:center ">
        <canvas id="canvasPlayground" ></canvas>
    </div>

    <script src="JavaScript/canvas-painting.js"></script>
</body>
</html>

Step2

Create a new javascript file and named it as canvas-painting.js or named to according to your choice and update the script reference

 

Step3

To make the calculation feasible and centralized I have declared some variables which will be used using drawing the playground. So pase the following code snippet into your javascript file.

var _height=500;//height of the canvas
var _width = 1000; //width of the canvas
var x1 = 0, y1 = 0, x2; y2 = 0;

var canvas = {
    width: _width,
    height: _height,
    halfWidth: _width / 2,
    lineWith: 2,
    backgorund: { Default: "#08a107", Orange: "#f60", Green: "#f80" },
    borerColor: { White: "#fff", Green: "#f80" },
    colorMap: { Orange: "#f60", Green: "#f80" }
};
var common = {
    fillColor: { Default: "#0d5f0c", Green: "green", Red: "red", Orange: "#f60", White: "#fff" },
    borderColor: "#fff",
    fontFamily: " 'Segoe UI',Arial,sans-serif",
    font: { Default: "12px 'Segoe UI',Arial,sans-serif", Heading: "14px 'Segoe UI',Arial,sans-serif" },
    lineWidth: { Pixel1: 1, Pixel2: 2, Pixel3:3, Pixel4: 4, Pixel5: 5 },
    arrowLength:{Default:70,Pixel50:50}
};

var penaltyArea = {
    height: Math.ceil((canvas.height * 70) / 100),
    width: Math.ceil((canvas.width * 12) / 100),
    yPosition: Math.ceil(((canvas.height * 30) / 100) / 2),
    xPosition: { TeamA: 0, TeamB: canvas.width - Math.ceil((canvas.width * 12) / 100) }
};
var goalArea = {
    height: Math.ceil((penaltyArea.height * 60)/100),
    width: Math.ceil(penaltyArea.width / 2),
    yPositon: (canvas.height - penaltyArea.height),
    xPosition: { TeamA: 0, TeamB: Math.ceil(canvas.width - (penaltyArea.width / 2)) }
};
var penaltyArc = {
    xPosition: { TeamA: penaltyArea.width - goalArea.width / 4, TeamB: canvas.width - penaltyArea.width + goalArea.width / 4 },
    yPosition: canvas.height/2,
    radius:goalArea.height/3
};

var groundCorner={
    radius:Math.ceil((canvas.height*2)/100)
};

Step4

 

Now add the following codesnippet in your javascript file because I will use these variable in upcoming functions

var captioinText = "";
var canvasElement = document.getElementById("canvasPlayground");
var context = canvasPlayground.getContext("2d");

Step5

 

Now I will create a function with name playgorund()  after that I will add some methods which will be used to draw playgorund. The name of the methods are bellow.

• setGroundStyles() :   to set the height,width and background styles of canvas
• drawCenterSpot():   to draw Center Spot of the ground at the center point of ground
• drawCorner():   to draw arc on the all four courners
• drawPenaltyArea():   to draw penalty arc for both team
• drawGoalArea():   to draw goal area for the both team
• drawPenaltyArc():    to draw penalty at both penalty area
• drawPenaltySpot():   to draw penalty spot for both team
• writeText():   to indicate area of the ground by name
• drawLine():   to draw the line like ground devider (Half-Way Line)
• drawArrowLine():   to draw arrow line at text
• drawCaptionForTeamA(): 
• drawCaptionForTeamB():  

function playground() {

}
playground.prototype.setGroundStyles = function () {
    canvasElement.setAttribute("width", canvas.width);
    canvasElement.setAttribute("height", canvas.height);
    canvasElement.style.border = "2px solid " + canvas.borerColor.White;
    canvasElement.style.margin = "auto 25px";
    canvasElement.style.background = canvas.backgorund.Default;
}
playground.prototype.drawCenterSpot = function (xAxis, yAxis, radius) {
    context.beginPath();
    context.arc(xAxis, yAxis, radius, 0, 2 * Math.PI);
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.lineWidth = common.lineWidth.Pixel2;
    context.strokeStyle = common.borderColor;
    context.stroke();
}

playground.prototype.drawCorner = function (xAxis, yAxis) {
    context.beginPath();
    context.arc(xAxis, yAxis, groundCorner.radius, 0, 2 * Math.PI);
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.lineWidth = common.lineWidth.Pixel2;
    context.strokeStyle = common.borderColor;
    context.stroke();

}
//Rectangular Area
playground.prototype.drawPenaltyArea = function (xAxis, yAxis) {
    context.beginPath();
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.fillRect(xAxis, yAxis, penaltyArea.width, penaltyArea.height);
    context.lineWidth = common.lineWidth.Pixel2;
    context.strokeStyle = common.borderColor;
    context.strokeRect(xAxis, yAxis, penaltyArea.width, penaltyArea.height);
}
playground.prototype.drawGoalArea = function (xAxis, yAxis) {
    context.beginPath();
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.fillRect(xAxis, yAxis, goalArea.width, goalArea.height);
    context.lineWidth = common.lineWidth.Pixel1;
    context.strokeStyle = common.borderColor;
    context.strokeRect(xAxis, yAxis, goalArea.width, goalArea.height);
}
playground.prototype.drawPenaltyArc = function (xAxis, yAxis, radius) {
    context.beginPath();
    context.arc(xAxis, yAxis, radius, 0, 2 * Math.PI);
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.lineWidth = common.lineWidth.Pixel2;
    context.strokeStyle = common.borderColor;
    context.stroke();

}
playground.prototype.drawPenaltySpot = function (xAxis, yAxis, radius) {
    context.beginPath();
    context.arc(xAxis, yAxis, radius, 0, 2 * Math.PI);
    context.fillStyle = common.fillColor.Default;
    context.fill();
    context.lineWidth = common.lineWidth.Pixel3;
    context.strokeStyle = common.borderColor;
    context.stroke();
}

playground.prototype.writeText = function (text, xAxis, yAxis, font,color) {
    font = (typeof font == 'undefined') ? common.font.Default : font;
    color = (arguments.length >= 5) ? color : common.fillColor.White;
    context.font = font;
    context.fillStyle = color;
    context.fillText(text, xAxis, yAxis);

}
playground.prototype.drawLine = function (x1, y1, x2, y2) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    context.lineWidth = common.lineWidth;
    context.fillStyle = common.fillColor.White;
    context.fill();
}
playground.prototype.drawArrowLine = function (x1, y1, x2, y2, isReverseArrow) {
    context.beginPath();
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.strokeStyle = common.fillColor.Orange;
    context.lineWidth = common.lineWidth.Pixel1;
    context.stroke();

    var x2ofLine = x2;
    var y2OfLine = y2;

    if (!isReverseArrow) {
        for (var i = 0; i <= 2; i++) {
            x1 = x2ofLine;
            y1 = ((i == 0) || (i == 2)) ? (y2OfLine - 4) : (y2OfLine + 4);
            x2 = (i == 2) ? (x2ofLine) : (x2ofLine + 4);
            y2 = (i == 2) ? (y2OfLine + 4) : y2OfLine;

            context.beginPath();
            context.moveTo(x1, y1);
            context.lineTo(x2, y2);
            context.lineWidth = common.lineWidth.Pixel2;
            context.strokeStyle = common.fillColor.Orange
            context.stroke();
        }
    }
    else {
        for (var i = 0; i <= 2; i++) {
            x1 = x2ofLine;
            y1 = ((i == 0) || (i == 2)) ? (y2OfLine + 4) : (y2OfLine - 4);
            x2 = (i == 2) ? (x2ofLine) : (x2ofLine - 4);
            y2 = (i == 2) ? (y2OfLine - 4) : y2OfLine;

            context.beginPath();
            context.moveTo(x1, y1);
            context.lineTo(x2, y2);
            context.lineWidth = 2;
            context.strokeStyle = common.fillColor.Orange;
            context.stroke();
        }
    }

}

playground.prototype.drawCaptionForTeamA = function (ground) {
    //Caption for Penalty Area
    x1 = penaltyArea.width - 20;
    y1 = canvas.height - penaltyArea.height;
    x2 = x1 + common.arrowLength.Default;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, false);
    captioinText = "Penalty Area";
    ground.writeText(captioinText, x2, y2 - 10, common.font.Heading);

    //Caption for Goal Area
    x1 = goalArea.width - goalArea.width / 2;
    y1 = canvas.height - goalArea.height + 60;
    x2 = x1 + common.arrowLength.Pixel50;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, false);
    captioinText = "Goal Area";
    ground.writeText(captioinText, x2, y2 - 10, common.font.Heading);

    //Caption for Penalty Arc
    x1 = penaltyArea.width + 20;
    y1 = canvas.height / 2;
    x2 = x1 + common.arrowLength.Default;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, false);
    captioinText = "Penalty Arc";
    ground.writeText(captioinText, x2, y2 - 10, common.font.Heading);

    //Caption for Penalty Spot
    x1 = goalArea.width / 2;
    y1 = canvas.height / 2;
    x2 = x1 + common.arrowLength.Pixel50;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, false);
    captioinText = "Penalty Spot";
    ground.writeText(captioinText, x2, y2 - 10, common.font.Heading);
}


playground.prototype.drawCaptionForTeamB = function (ground) {

    //Caption for Penalty Area
    x1 = canvas.width - penaltyArea.width + 20;
    y1 = canvas.height - penaltyArea.height ;
    x2 = x1 - common.arrowLength.Default;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, true );
    captioinText = "Penalty Area";
    ground.writeText(captioinText, x2 - 50, y2 - 10, common.font.Heading);

    //Caption for Goal Area
    x1 = canvas.width - goalArea.width/2;
    y1 = canvas.height - goalArea.height + 60;
    x2 = x1 - common.arrowLength.Pixel50;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, true);
    captioinText = "Goal Area";
    ground.writeText(captioinText, x2-50, y2 - 10, common.font.Heading);

    //Caption for Penalty Arc
    x1 = canvas.width -  penaltyArea.width -20;
    y1 = canvas.height / 2;
    x2 = x1 - common.arrowLength.Default;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, true);
    captioinText = "Penalty Arc";
    ground.writeText(captioinText, x2 -50, y2 - 10, common.font.Heading);

    //Caption for Penalty Spot
    x1 = goalArea.width / 2;
    y1 = canvas.height / 2;
    x2 = x1 + common.arrowLength.Pixel50;
    y2 = y1;
    ground.drawArrowLine(x1, y1, x2, y2, true);
    captioinText = "Penalty Spot";
    ground.writeText(captioinText, x2, y2 - 10, common.font.Heading);
}

Step6

No add the following codesnippet which will draw the football playground on window load()  

window.onload = function () {
    var xPos = 0;
    var yPos = 0;
    var ground = new playground();
    ground.setGroundStyles();
    setTimeout(function () {
        //First draw all corners
        ground.drawCorner(5, 5);//Left Top
        ground.drawCorner(5, canvas.height - 5); //Bottom Left
        ground.drawCorner(canvas.width - 5, 5); //Top Right
        ground.drawCorner(canvas.width - 5, canvas.height - 5); //Bottom Right

        //Now draw ground devider after 500 ms
        setTimeout(function () {
            //Half-way line
            ground.drawLine(canvas.width / 2, 0, canvas.width / 2, canvas.height);
            captioinText = "Half-Way Line";
            xPos = (canvas.width / 2) + common.arrowLength.Default;
            yPos = canvas.height / 6;

            //Now draw center spot
            setTimeout(function(){
                ground.drawArrowLine(canvas.halfWidth, yPos, xPos, yPos);
                ground.writeText(captioinText, xPos + 10, yPos, common.font.Heading);
                ground.drawCenterSpot(canvas.width / 2, canvas.height / 2, penaltyArc.radius);
                ground.drawPenaltySpot(canvas.width / 2, canvas.height / 2, 2);

                //Draw Team a Penaly Areas
                setTimeout(function () {
                    //Team-A
                    captioinText = "Team - A";
                    xPos = Math.ceil((canvas.width) / 4) - Math.ceil(captioinText.length / 2);
                    yPos = 20;
                    ground.writeText(captioinText, xPos, yPos, common.font.Heading, "Yellow");
                    ground.drawPenaltyArc(penaltyArc.xPosition.TeamA, penaltyArc.yPosition, penaltyArc.radius);
                    ground.drawPenaltyArea(penaltyArea.xPosition.TeamA, penaltyArea.yPosition);
                    ground.drawGoalArea(goalArea.xPosition.TeamA, goalArea.yPositon);
                    ground.drawPenaltySpot(goalArea.width / 2, canvas.height / 2, 2);
                    ground.drawCaptionForTeamA(ground);

                    ////Draw Team a Penaly Areas
                    setTimeout(function () {
                        //Team*B
                        captioinText = "Team - B";
                        xPos = canvas.width - canvas.width / 3.5;
                        ground.writeText(captioinText, xPos, yPos, common.font.Heading, "Yellow");
                        ground.drawPenaltyArc(penaltyArc.xPosition.TeamB, penaltyArc.yPosition, penaltyArc.radius);
                        ground.drawPenaltyArea(penaltyArea.xPosition.TeamB, penaltyArea.yPosition);
                        ground.drawGoalArea(goalArea.xPosition.TeamB, goalArea.yPositon);
                        ground.drawPenaltySpot(canvas.width - (goalArea.width / 2), canvas.height / 2, 2);
                        ground.drawCaptionForTeamB(ground);

                        setTimeout(function () {
                            //Draw Captions for Center Spot
                            ground.drawArrowLine(canvas.halfWidth, canvas.height / 2, canvas.halfWidth + penaltyArc.radius * 2, canvas.height / 2, false);
                            captioinText = "Center Spot";
                            xPos = canvas.halfWidth + penaltyArc.radius * 2;
                            yPos = (canvas.height / 2) - 10;
                            ground.writeText(captioinText, xPos, yPos, common.font.Heading, "yellow");
                        }, 500);

                    }, 500);

                }, 1000);

            },500);

        }, 500);

    }, 5000);

}

You can see that I have use setTimeout function to draw the object one after another. 

 

Output

  

Summary

In this article, we learned about HTML5 canvas element to draw football playground using JavaScript. In upcoming article, I will explore the more about canvas including 3d context and animations.