Saturday 21 December 2013

CSS » Padding



The CSS padding properties define the space between the element border and the element content.

In this tutorial we will show You how to set left, right, bottom and top padding. After this we will show You how to use the shorthand property(all in one).

There's two possible values - length( in pixels, pt, em, etc. ) and  % ( Defines a padding in % of the containing element ).












Individual Sides

You can specify different padding for different sides.


» EXAMPLE:


<html>

<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#padd {
padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 20px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default padding.</h3><br />
<p id="padd" class="demo">This is paragraph with ready padding.</p>
</body>
</html>


» Result:




This is heading with default padding.


This is paragraph with ready padding.





Shorthand property

Now You will see how to use all CSS padding properties in one property.

» EXAMPLE:

<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#padd {
padding: 30px 20px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default padding.</h3><br />
<p id="padd" class="demo">This is paragraph with ready padding.</p>
</body>
</html>


» Result:

This is heading with default padding.


This is paragraph with ready padding.





The padding property can have from one to four values.
  • padding:25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

  • padding:25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

  • padding:25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

  • padding:25px;
    • all four paddings are 25px

Thursday 19 December 2013

CSS » Margin


Margin it's just a space. Cannot be styled and it's fully transparent.
The margin clears an area around an element, outside the border.
Margin have 4 possible values:

Note: You can use negative values to overlap the content.



  • auto  ( The browser calculates a margin )
  • length ( Specifies a margin in px, pt, cm, etc. Default value is 0px )
  • % Specifies a margin in percent of the width of the containing element )
  • inheritSpecifies that the margin should be inherited from the parent element )















You can specify different margins.

» EXAMPLE:

<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-left: 100px;
margin-right: 100px;
margin-top: 40px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with ready margins.</p>
</body>
</html>


» Result:

This is heading with default margin.

This is paragraph with ready margins.



Shorthand property

You can specify all margin properties in one by using "margin" property.

» EXAMPLE:

<html>

<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin: 50px 100px;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with ready margins.</p>
</body>
</html>


» Result:





This is heading with default margin.

This is paragraph with ready margins.



The margin property can have from one to four values.
  • margin:25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin:25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin:25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin:25px;
    • all four margins are 25px





Using cm value for margins

» EXAMPLE:


<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-top: 3cm;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with setted margins.</p>
</body>
</html>


» Result:



This is heading with default margin.

This is paragraph with setted margins.





Using percents(%) for margins

» EXAMPLE:


<html>
<head>
<style>
.demo {
background-color: #03C;
color: #FFF;
}
#marg {
margin-top: 10%;
}
</style>
</head>
<body>
<h3 class="demo">This is heading with default margin.</h3>
<p id="marg" class="demo">This is paragraph with setted margins.</p>
</body>
</html>


» Result:


This is heading with default margin.

This is paragraph with setted margins.

Tuesday 17 December 2013

CSS » Outline


Now in this chapter we will explain You how to use outline.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". It's different from the border property.















There is 4 CSS Outline Properties:
  • outline-style
  • outline-color
  • outline-width
  • outline

Now we will show You how to use this properties.


Creating outline

When You create outline You have to use outline-style property.
Like in CSS borders You can define same values like border ones:
  • none
  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • inherit

» EXAMPLE:

<html>
<head>
<style>
#demo {
outline-style: dotted;
border: 1px solid red;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
</body>
</html>


» Result:


Outline example.





Setting outline color

In this example we will use outline-color property.

» EXAMPLE:


<html>

<head>
<style>
#demo {
border: 1px solid red;
outline-style: dotted;
outline-color: blue;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
</body>
</html>


» Result:




Outline example.





Setting outline width

If You want to set outline width You have to use outline-width property.
You can add

» EXAMPLE:


<html>

<head>
<style>
#demo {
border: 1px solid red;
outline-style: dotted;
outline-width: thick;
outline-color: blue;
}
#demo2 {
border: 1px solid red;
outline-style: dotted;
outline-width: 8px;
outline-color: blue;
}
</style>
</head>
<body>
<p id="demo">Outline example.</p>
<br />
<p id="demo2">Outline example 2.</p>
</body>
</html>


» Result:



Outline example.



Outline example 2.

Monday 16 December 2013

CSS » Border

In CSS border can be added with border property.
Border property have 20 different properties.


border
Sets all the border properties in one declaration
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border properties in one declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right
Sets all the right border properties in one declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in one declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders


border-style property

» EXAMPLE:

<html>
<head>
<style>
#a {border-style:none;}
#b {border-style:double;}
#c {border-style:dashed;}
#d {border-style:solid;}
#e {border-style:dotted;}
#f {border-style:ridge;}
#g {border-style:groove;}
#h {border-style:outset;}
#i {border-style:inset;}
#j {border-style:hidden;}
</style>
</head>
<body>
<p id="a">Without Border</p>
<p id="b">With double border.</p>
<p id="c">With dashed border.</p>
<p id="d">With solid border.</p>
<p id="e">With dotted border.</p>
<p id="f">With ridge border.</p>
<p id="g">With groove border.</p>
<p id="h">With outset border.</p>
<p id="i">With inset border.</p>
<p id="j">With hidden border.</p>
</body>
</html>


» Result:


Without Border


With double border.


With dashed border.


With solid border.


With dotted border.


With ridge border.


With groove border.


With outset border.


With inset border.


With hidden border.





Border Width
Border width is defined with border-width property.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

» EXAMPLE:

<html>
<head>
<style>
#c {
border-style:solid;
border-width: 6px;
}
#d {
border-style:solid;
border-width:medium;
}
</style>
</head>
<body>
<p id="c">Solid border with 6px width.</p>
<p id="d">Solid border with 6px width.</p>
</body>
</html>


» Result:


Solid border with 6px width.


Solid border with 6px width.



Border Color

» EXAMPLE:


<html>

<head>
<style>
#c {
border-style:solid;
border-color: blue;
}
</style>
</head>
<body>
<p id="c">Solid border with blue color.</p>
</body>
</html>


» Result:


Solid border with blue color.





Individual sides
In the next example we will use:


  • border-top-style
  • border-bottom-style
  • border-right-style
  • border-left-style

» EXAMPLE:

<html>
<head>
<style>
#c {
border-top-style:dotted;
border-bottom-style:dashed;
border-right-style:double;
border-left-style:double;
}
</style>
</head>
<body>
<p id="c">Solid border with blue color.</p>
</body>
</html>


» Result:



Solid border with blue color.





You can also set border with a single property.

» EXAMPLE:


<html>

<head>
<style>
#c {
border-style:dotted double;
}
</style>
</head>
<body>
<p id="c">Dotted .</p>
</body>
</html>


» Result:



Solid border with blue color.





The border-style property can have from one to four values.
  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted



Shorthand property


The border property is a shorthand for the following individual border properties:
  • border-width
  • border-style (required)
  • border-color

» EXAMPLE:



<html>

<head>

<style>

#c {

border: 2px blue dotted;
}
</style>
</head>
<body>
<p id="c">Dotted border with blue color and 2px width.</p>
</body>
</html>


» Result:


Dotted border with blue color and 2px width.

Sunday 15 December 2013

CSS » Box Model

Every HTML element is box. In CSS You can style them. CSS box model  is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.














Margin clears an area around the border. And cannot be styled. It's fully transparent.
Border that goes around the padding and content. 
Padding clears an area around the content.
Content is where text and images appears.


Define width and height


» EXAMPLE:

<html>

<head>
<style>
#demo {
width: 250px;
height: 100px;
border: 4px solid #03C;
padding: 10px;
}
</style>
</head>
<body>
<div id="demo">
<p>Total width = 250px</p>
<p>Total height = 100px</p>
</div>
</body>
</html>


» Result:


Total width = 250px
Total height = 100px

Note: You have to know that >>>
250px width
+ 20px (left + right padding)
+ 8px (left + right border)
= 278px


If You want to make box with total width 250, the final result of the above math must be 250.



More about CSS box styling in the next chapters.

CanvasTutorial

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). It can, for instance, be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML5.
This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

 Using the <canvas> element isn't very difficult but you do need a basic understanding of HTML and JavaScript. The <canvas> element isn't supported in some older browsers, but is supported in recent versions of all major browsers.The default size of the canvas is 300px * 150px (width * height). But custom sizes can be defined using CSS height and width property. In order to draw graphics on the canvas we use a javascript context object, which creates graphics on the fly.

The <canvas> element

Let's start this tutorial by looking at the <canvas> element itself.
<canvas id="tutorial" width="150" height="150"></canvas>
This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.
Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using CSS.
The id attribute isn't specific to the <canvas> element but is one of the default HTML attributes which can be applied to (almost) every HTML element (like class for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.
The <canvas> element can be styled just like any normal image (margin, border, background, etc). These rules, however, don't affect the actual drawing on the canvas. We'll see how this is done later in this tutorial. When no styling rules are applied to the canvas it will initially be fully transparent.

Fallback content

Since some older browsers (in particular, versions of Internet Explorer earlier than version 9) don't support the <canvas> element, you should provide fallback content to be displayed by those browsers.
This is very straightforward: we just provide alternate content inside the <canvas> element. Browsers which don't support <canvas> will ignore the container and render the fallback content inside it. Browsers which do support <canvas> will ignore the content inside the container, and just render the canvas normally.
For example, we could provide a text description of the canvas content or provide a static image of the dynamically rendered content. This can look something like this:
<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

Required </canvas> tag

Unlike the <img> element, the <canvas> element requires the closing tag (</canvas>).
Note: Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.
If fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all.

The rendering context

<canvas> creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. We'll focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context ("experimental-webgl") based on OpenGL ES.
The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(), used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d".
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.

Checking for support

The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:
var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

A skeleton template

Here is a minimalistic template, which we'll be using as a starting point for later examples.
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>
The script includes a function called draw(), which is executed once the page finishes loading; this is done by using the load event on the document. This function, or one like it, could also be called using window.setTimeout(), window.setInterval(), or any other event handler, as long as the page has been loaded first.
Here's what the template looks like in action:

A simple example

To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.
<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>
 

The grid

Before we can start drawing, we need to talk about the canvas grid or coordinate space. The HTML template on the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner (coordinate (0,0)). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top (coordinate (x,y)). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it. For now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports one primitive shape: rectangles. All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes.
First let's look at the rectangle. There are three functions that draw rectangles on the canvas:
fillRect(x, y, width, height)
Draws a filled rectangle.
strokeRect(x, y, width, height)
Draws a rectangular outline.
clearRect(x, y, width, height)
Clears the specified rectangular area, making it fully transparent.
Each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size.
Below is the draw()function from the previous page, but now making use of these three functions.

Rectangular shape example

function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } } This example's output is shown below.
ScreenshotLive sample

The fillRect() function draws a large black square 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the center, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.
In upcoming pages we'll see two alternative methods for clearRect(), and we'll also see how to change the color and stroke style of the rendered shapes.
Unlike the path functions we'll see in the next section, all three rectangle functions draw immediately to the canvas.

Drawing paths

To make shapes using paths takes some extra steps. First, you create the path. Then you use drawing commands to draw into the path. Then you close the path. Once the path has been created, you can stroke or fill the path to render it. Here are the functions used to do this:
beginPath()
Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
closePath()
Closes the path so that future drawing commands are once again directed to the context.
stroke()
Draws the shape by stroking its outline.
fill()
Draws a solid shape by filling the path's content area.
The first step to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.
Note: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.
The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.
The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.
Note: When you call fill(), any open shapes are closed automatically, so you don't have to call closePath(). This is not the case when you call stroke().

Drawing a triangle

For example, the code for drawing a triangle would look something like this:
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,50); ctx.lineTo(100,75); ctx.lineTo(100,25); ctx.fill(); } } The result looks like this:

Moving the pen

One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveTo() function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.
moveTo(x, y)
Moves the pen to the coordinates specified by x and y.
When the canvas is initialized or beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere else. We could also use moveTo() to draw unconnected paths. Take a look at the smiley face on the right. I've marked the places where I used the moveTo() method (the red lines).
To try this for yourself, you can use the code snippet below. Just paste it into the draw() function we saw earlier.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); } } The result looks like this:
ScreenshotLive sample

If you'd like to see the connecting lines, you can remove the lines that call moveTo().
Note: To learn more about the arc() function, see the Arcs below.

Lines

For drawing straight lines, use the lineTo() method.
lineTo(x, y)
Draws a line from the current drawing position to the position specified by x and y.
This method takes two arguments, x and y, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the moveTo() method.
The example below draws two triangles, one filled and one outlined.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Filled triangle ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // Stroked triangle ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke(); } } This starts by calling beginPath() to start a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.
ScreenshotLive sample

You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been drawn, not a complete triangle.

Arcs

To draw arcs or circles, we use the arc() method. You can also use arcTo(), but its implementations are somewhat less reliable, so we won't cover it here.
arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draws an arc.
This method takes five parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The anticlockwise parameter is a Boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.
Note: Angles in the arcfunction are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.
The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.
The two for loops are for looping through the rows and columns of arcs. For each arc, we start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.
The x and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.
The statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); for(var i=0;i<4;i++){ for(var j=0;j<3;j++){ ctx.beginPath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // Arc radius var startAngle = 0; // Starting point on circle var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } } }
ScreenshotLive sample


Bezier and quadratic curves

The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.
quadraticCurveTo(cp1x, cp1y, x, y)
Draws a quadratic Bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Draws a cubic Bézier curve from the current pen position to the end point specified by x and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).
The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one control point (indicated by the red dot) while a cubic Bézier curve uses two control points.
The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.
Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.
There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.

Quadratic Bezier curves

This example uses multiple quadratic Bézier curves to render a speech balloon.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } }
ScreenshotLive sample

Cubic Bezier curves

This example draws a heart using cubic Bézier curves.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Quadratric curves example ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } }
ScreenshotLive sample

Rectangles

In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.
rect(x, y, width, height)
Draws a rectangles whose top-left corner is specified by (x, y) with the specified width and height.
When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

Making combinations

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.
function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); roundedRect(ctx,12,12,150,150,15); roundedRect(ctx,19,19,150,150,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(31,37); ctx.fill(); for(var i=0;i<8;i++){ ctx.fillRect(51+i*16,35,4,4); } for(i=0;i<6;i++){ ctx.fillRect(115,51+i*16,4,4); } for(i=0;i<8;i++){ ctx.fillRect(51+i*16,99,4,4); } ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill(); } } // A utility function to draw a rectangle with rounded corners. function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); } The resulting image looks like this:
We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.
We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.