Getting started with HTML5 Canvas

I would like to share with you some curiosity in this article. And we are going deep in its use.

The <canvas> was introduced in HTML5 and it gives remarkable opportunities for web designers and game developers aswell. It is a a resolution independent bitmap canvas to display diagrams and game graphics.

It is a blank rectangular area (if we not define then 300×150 pixel wide) which we can draw with JavaScript-codes.
Canvas has a well-designed 2D API but i don’t think that we have to wait much to the 3D API neither.

Let’s cut to the chase, shall we? And see how we define it:

<canvas id="drawing" width="300" height="300">
 </canvas>

As You can see we can give ID and set its parameters. The ID is relevant because later we can allude to that in DOM.

For Example:

var a_canvas=document.getElementById("drawing");

Of course we have opportunity to use CSS aswell because the canvas is an HTML element.

<style type="text/css">
 canvas { border: 2px green; }
 </style>
 <canvas id=" drawing" width="300" height="300">
 </canvas>

Let’s see a full HTML5 example for its use. Let make a standard HTML5 document and place the canvas element in the body and with the help of javascript we will initialize the 2D environment. It should looks like this:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>CANVAS basics</title>
 </head>

<body>
 <canvas id="drawing" width="500" height="500">
 </canvas>
 <script>
 var canvas = document.getElementById('drawing');
 var ctx = canvas.getContext('2d');
 </script>
 </body>
 </html>

The coordinate system

Our coordinate systems origo is the upper-left corner of the canvas. This is the 0, 0 spot. You will find the X and Y axis in the following illustration. Starting from the origo the values for both axes are increasing.

Canvas koordináta rendszer

Canvas coordinate system

The rectangular magic

Now that our canvas is done and we fully understand its coordinate system let’s take a look how can we draw a simple object.
First of all try a black 200×200 square.

Paste the following code into the script of our put-up canvas.

ctx.fillRect(50, 50, 200, 200);

You can check the demo here.

In the case of squares big groups of partner functions can be available. Let’s see them:

fillStyle – filling style, elements background color. Default color is black as our square too.
fillRect (x, y) – drawing a square based by width and height.
strokeStyle – color and style of frame
lineWidth – Define the frame thickness.
strokeRect (x, y) – drawing a square with the outline to be in effect.
clearRect (x, y) – based by the coordinates erases the squares pixels.

In the following example using the lessons learned let draw 4 squares. Because of a better understanding I have placed the codes with comments.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>CANVAS basics</title>
 </head>
 <body>
 <canvas id="drawing" width="500" height="500">
 </canvas>

<script>
 var canvas = document.getElementById('drawing');
 var ctx = canvas.getContext('2d');
 ctx.fillRect(50, 50, 150, 150); /*default square*/

ctx.fillStyle = "rgb(0, 160, 230)"; /*blue color square*/
 ctx.fillRect(135, 75, 125, 125);

ctx.lineWidth = 4; /*frame thickness definition*/

ctx.strokeStyle = "rgb(0, 0, 0)"; /*white square*/
 ctx.strokeRect(50, 350, 150, 150);

ctx.fillStyle = "rgba(0, 160, 230, 0.75)"; /*transparent square*/
 ctx.fillRect(150, 400, 125, 125);
 </script>

</body>
 </html>

The example can be available here.
This was simple so far let’s take a look what happens if we want to make a bit complicated diagrams.

BeginPath() – ClosePath() or let’s draw with pen

There is an option to this if we give the pens path. We have to start this with beginPath() method and end with closePath() method.
We put our draw between the two elements and we are going to display at the end.
If we want to draw a straigh line then we can do that like this:

moveTo (x, y) – moving the pencil into the given zero point.
lineTo (x, y) – drawing a line until the specified end-point.
fill() – fills the drawn form.

Let’s see a simple example. Let make the following graph.

Canvas példa 1

Canvas example 1

<script>
 var canvas = document.getElementById('drawing');
 var ctx = canvas.getContext('2d');
 ctx.lineWidth=5;
 ctx.beginPath();
 ctx.moveTo(20, 20);
 ctx.lineTo(100, 100);
 ctx.lineTo(100, 80);
 ctx.lineTo(100, 20);
 ctx.closePath();
 ctx.fill();
 ctx.stroke();
 </script>

The example can be available here.

A Samsung digital window commercial gave me an idea (digital venetian blind…). Let’s draw different thickness lines below each other.

Our cycle starts from 30 pixel tickness backwards and draws the necessary lines. The moveTo() got place because after the beginPath() command the pencil return every time to the origo. Let’s see our cycle.

Canvas Példa 2

Canvas Example 2

for (i = 25; i > 0; i--)
 {
 ctx.strokeStyle = "black";
 ctx.lineWidth = i;
 ctx.beginPath();
 ctx.moveTo(60, 20 + (25 - i) * 25);
 ctx.lineTo(335, 20 + (25 - i) * 25);
 ctx.stroke();
 }

The example can be available here.

Let’s draw a circle

To draw a circle we need the arc method (x, y, radius, start, end, anticlockwise). Its parameters are the following: x and y means the center of circle, the radius is the circles radius, the start is the starting angle (in radian), the end means the arc and the anticlockwise means the direction. Let’s see a simple example:

<script>
 var canvas = document.getElementById('drawing');
 var ctx = canvas.getContext('2d');
 ctx.beginPath();
 ctx.arc(180, 150, 50, 0, Math.PI*2, true);
 ctx.fill();
 </script>

The example can be available here.

Let put a square below. 🙂

Canvas Példa 3

Canvas Example 3

<script>
 var canvas = document.getElementById('drawing');
 var ctx = canvas.getContext('2d');
 ctx.beginPath();
 ctx.arc(180, 150, 50, 0, Math.PI*2, true);
 ctx.fill();
 ctx.fillRect(155, 200, 50, 50);
 </script>

Available here.

To Be Continued…

Source:

You may also like...