HTML5 CANVAS

What is Canvas

The canvas element is used to draw graphics on a web page.

a. The HTML5 canvas element can be used to draw graphics on the webpage via scripting (usually JavaScript).

b. The canvas was originally introduced by Apple for the Mac OS Dashboard widgets and to power graphics in the Safari web browser.

c. Later it was adopted by the-

· Firefox

· Google Chrome

· Opera.

d. Now the canvas is a part of the new HTML5 specification for next generation web technologies.

e. The <canvas> element isn't supported in some older browsers, but is supported in recent versions of all major browsers such as-

· IE 9+

· Firefox

· Chrome

· Safari

· Opera.

f. By default the canvas element has 300px of width and 150px of height without any border and content.

g. However the custom width and height can be defined using CSS height and width property whereas border can be applied using the CSS border property.

Understanding Canvas Coordinates

The canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are (0, 0) which is known as origin and the coordinates in the bottom-right corner are (canvas width, canvas height) as demonstrated below.

(0,0)

Drawing Path and Shapes on Canvas

<!DOCTYPE html>

<head>

<title>HTML5 Canvas</title>

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

// draw stuff here

};

</script>

</head>

<body>

</body>

</html>

The window.onload function defines to access the canvas element we need to wait till the page load. Once the page loads, we can access the canvas element with document.getElementById(). Later we have defined a 2D canvas context by passing 2d into the getContext() method of the canvas object.

Drawing a Line

The most basic path you can draw on canvas is a straight line. The methods used for this purpose are moveTo(), lineTo() and stroke().

The moveTo() method defines the position of drawing cursor onto the canvas, whereas the lineTo() method used to define the coordinates of the line's end point, and finally the stroke() method is used to make the line visible.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.moveTo(50, 150);

context.lineTo(250, 50);

context.stroke();

};

</script>

Drawing a Arc

You can create arc path like smiley faces using the arc() method. The basic syntax of arc()method can be given with:

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);

The following example will draw a simple arc on the canvas.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);

context.stroke();

};

</script>

Drawing a Rectangle

You can create simple rectangle and square using the rect() method. The rect() method requires four parameter x, y position of the rectangle and its width and height. The basic syntax of the rect() method can be given with:

context.rect(x, y, width, height);

The following example will draw a simple rectangle centered on the canvas.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.rect(50, 50, 200, 100);

context.stroke();

};

</script>

Drawing a Circle

There is no specific method for creating circle like rectangle's rect() method. However you can create a fully enclosed arc such as circle using the arc() method. The basic syntax for drawing a complete circle can be given with:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

The following example will draw a complete circle centered on the canvas.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.arc(150, 100, 70, 0, 2 * Math.PI, false);

context.stroke();

};

</script>

Applying Styles and Colors on Stroke

The default color of the stroke is black and its thickness is one pixel. But, you can set the color and width of the stoke using the strokeStyle and lineWidth property respectivley.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.lineWidth = 5;

context.strokeStyle = "orange";

context.moveTo(50, 150);

context.lineTo(250, 50);

context.stroke();

};

</script>

You can also set the cap style for the lines using the lineCap property. There are three styles available for the line caps — butt, round, and square.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.lineWidth = 10;

context.strokeStyle = "orange";

context.lineCap = "round";

context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);

context.stroke();

};

</script>

Filling Colors inside Canvas Shapes

You can also fill color inside the canvas shapes using the fillStyle() method. The following example will shows you how to fill a solid color inside a rectangle.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.rect(50, 50, 200, 100);

context.fillStyle = "#FB8B89";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

}

</script>

NOTE:It is recommended to use the fill() method before the stroke() method in order to render the stroke correctly.

Similarly, using the fillStyle() method you can fill color inside a circle.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.arc(150, 100, 70, 0, 2 * Math.PI, false);

context.fillStyle = "#FB8B89";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

};

</script>

Filling Gradient Colors inside Canvas Shapes

You can also fill gradient color inside the canvas shapes instead of solid colors. There are two gradient style available in HTML5 — linear and radial.

The basic syntax of the linear gradient can be given with:

var grd = context.createLinearGradient(startX, startY, endX, endY);

The following example will show you how to fill linear gradient inside a rectangle using the createLinearGradient() method.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.rect(50, 50, 200, 100);

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);

grd.addColorStop(0, '#8ED6FF');

grd.addColorStop(1, '#004CB3');

context.fillStyle = grd;

context.fill();

context.stroke();

};

</script>

Similarly, you can fill canvas shapes with radial gradient using the createRadialGradient()method. The basic syntax of the radial gradient can be given with:

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

The following example will show you how to fill radial gradient inside a circle using the createRadialGradient() method.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.arc(150, 100, 70, 0, 2 * Math.PI, false);

var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);

grd.addColorStop(0, '#8ED6FF');

grd.addColorStop(1, '#004CB3');

context.fillStyle = grd;

context.fill();

context.stroke();

};

</script>

Drawing Text on Canvas

You can also draw text onto canvas. These texts can contain any Unicode characters. The following example will draw a simple greeting message "Hello World!" onto a canvas.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 32px Arial";

context.fillText("Hello World!", 50, 100);

};

</script>

You can also set the text color and its alignment on canvas.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 32px Arial";

context.textAlign = "center";

context.textBaseline = "middle";

context.fillStyle = "orange";

context.fillText("Hello World!", 150, 100);

};

</script>

You can also apply stroke on text using the strokeText() method. This method will color the perimeter of the text instead of filling it. However if you want to set both the fill and stroke on canvas text you can use both the fillText() and the strokeText() methods together.

Example

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.font = "bold 32px Arial";

context.textAlign = "center";

context.textBaseline = "middle";

context.strokeStyle = "orange";

context.strokeText("Hello World!", 150, 100);

};

</script>

NOTE:It is recommended to use the fillText() method before the strokeText()method in order to render the stroke correctly.

StudyMaterial

Search This Blog

HTML5 CANVAS

Comments

Post a Comment