WORKING WITH GRAPHICS (CANVAS)

WORKING WITH GRAPHICS (CANVAS)

Defining a Canvas 

A canvas is defined by using the <CANVAS> tag.This tag is defined in the body section of the HTML document.A <CANVAS> tag provide various attributes that enable you to specify the size, border, and ID for the canvas.

You can define a Canvas by using the following code within the <BODY> tag.

<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>

A preceding code create a Canvas with ID, myCanvas, of size 300*300 with a solid green border of 1px thickness.


Accessing the Canvas

Defining a Canvas element only creates a blank drawing surface.
However, to actually draw graphic objects on the Canvas, you need to access the Canvas in JavaScript code.
You can write the following code in the <BODY> tag to access the Canvas element.

<SCRIPT>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
</SCRIPT>

In the preceding code, the getElementById() method is  used to return the reference of the element with Id,myCanvas, and stores the reference in the variable named c.
The getContect() method is used to return a drawing context object that provides the methods and properties needed for the drawing graphics on the Canvas.This object is stored inside the variable named ctx.In the preceding code 2d is passes as an argument to the getContext() method as the majority of the browsers support the creation of  2d graphics.

Features of HTML5 Canvas

There are some reasons you might want to consider learning to use HTML5  canvas features:

  • Interactivity: Canvas is fully interactive . It can respond to the users actions by listening for keyboard, mouse or touch events. So the developer is not restricted to only static graphics or images.
  • Animation: Ever object drawn on the canvas can be animated. This allows for all levels animations to be created , from simple bouncing balls to complex forward and inverse kinematics.
  • Flexibility: developers can create just about anything using canvas .It can display the lines, shapes text etc with or without animation.
  • Platform Support: HTML5 is supported by all browsers and can be accessed on a wide range of devices including desktops, tablets and smart phones.
  • Popularity: Canvas popularity is rapidly and steadily growing so there is no storage of resources available.
  • Free and accessible  development tools: The basic tools for creating HTML5 canvas applications are just a browser and good code editor. There are many great and free libraries and tools to help developers with advanced canvas development.

fillRect ()
A fillRect() method is used to create a rectangle filled  with the specified color.
The default color is black.
fillRect(x,y,width,height);


Consider a following code for creating a filled rectangle on the canvas.
<!DOCTYPE HTM>
<HTML>
<HEAD>
</HEAD>
<BODY>
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
<SCRIPT>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(30,40,120,120);
</SCRIPT>
</BODY>
<HTML>


Result

fillStyle
The fillStyle property is used to define a color  that will be used to fill any closed shape drawn on the canvas.

fillStyle="color";

Consider a following code for applying fill Style on a rectangle drawn  on the canvas.

<!DOCTYPE HTM>
<HTML>
<BODY>
<CANVAS ID="myCanvas" width="300" height="300" style="border:1px solid black">
</CANVAS>
<SCRIPT>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(30,40,120,120);
</SCRIPT>
</BODY>
<HTML>

Result






About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment