HTML5 Basic Canvas Methods For Every Designer

HTML 5 seems to be underutilized by designers considering the fact like an average business site might always not make use of canvas but learning HTML 5 canvas will be an added advantage to a designer. Canvas allows creation of really useful real-time graphics that  enables drawing or animating on web page directly. Let us explore this awesome feature in detail

Setting Up Canvas Objects

It can be easily created in code with graphics libraries like Raphaël but it cannot be declared as any other HTML element.

Code to set canvas object in HTML4 with Raphaël:

<div id=”canvas”>

    <div id=”paper”>

     </div><!– canvas –>

<script src=”jquery.js”></script>

<script src=”raphael-min.js”></script>

Code to set canvas object in HTML5 natively:

in respect to

<canvas id=”canvas01″>

</canvas>

It is quite evident how simple is it to create a canvas object in HTML5 in comparision to HTML earlier versions. Above code will set up a canvas object as wide as 800px and 450px high at the same time ensuring no object is near enough to poke into canvas space. id attribute of a canvas determines to which canvas exactly drawing routine sending output.

JavaScript to draw the canvas

HTML 5 is unable to draw everything on canvas. Using JavaScript to write to canvas you need to identify using  getElementByID method which canvas is to be drawn after which drawing context is defined (2D or 3D) is definedwith the help of canvas.getContext method and both these variables need to be initialized as below

<canvas id=”canvas01″

</canvas>

<script>

        function drawtoCany01( ){

              var cnv=document.getElementByID(“canvas01”)

              var ctx=cnv.getContext(“2d”)

};

        drawToCanv01( ) ;

</script>

Above code will initializes the required variables for drawing to canvas01. Now you need to include a drawing instruction in the drawToCanv01 function. JavaScript drawing methods is applied on the context variable which is “ctx” ib here

Drawing Process Step Wise

1. Set the width of line

2. Set the stroke style

3. Start a path

4. Plot the lines for the path

5. Draw the lines

6. End the path

It is possible to set new line widths and stroke styles for any numberof lines as you want. To dig into details of making circles or arcs and drawing cubic curves as well as a filed shape or even applying a linear gradient here

Looking forward for your comment and query regarding what are your views in respect to HTML 5 Canvas.

About Singsys Pte. Ltd. Singsys is a solution provider that offer user friendly solution on cutting edge technologies  to engage customers and boost your brand online results from a set of certified developers, designers who prefer optimized utilization of the available resources to align client’s idea  with their skillset to reflect it into a mobile application, web application or an E-commerce solution.

You may be interested in following:

1. 14 Fantastic Mobile Application Frameworks to Build with HTML, CSS & JavaScript in 2016-17