Declaring Canvas – Sibeesh Passion https://www.sibeeshpassion.com My passion towards life Fri, 17 Jul 2015 12:50:11 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Declaring Canvas – Sibeesh Passion https://www.sibeeshpassion.com 32 32 HTML 5 Elements in a Look: Part II https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-2/ https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-2/#disqus_thread Thu, 29 Jan 2015 19:37:23 +0000 https://sibeeshpassion.com/?p=841 Introduction

If you are new to HTML 5, I suggest you to read my first part article here: HTML 5 Elements in a Look: Part 1.

New Attribute syntax

In HTML 5, we have new attribute syntax as in the following:

  • Empty
  • Unquoted
  • Double Quoted
  • Single Quoted

Example

We can assign the text property of an input type as follows.

[js]
<input type=”text” value=”Sibeesh” disabled>
<input type=”text” value=Sibeesh>
<input type=”text” value=”Sibeesh” >
<input type=”text” value=’Sibeesh’ >
[/js]

To make IE lower versions to read HTML5 elements:

Add The Shiv
[js]
<!–[if lt IE 9]>
<script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
[/js]

Apply CSS to Elements

Since we can apply styles to our normal HTML4 elements, we can apply styles to our new semantic elements too.

Example:
[html]
footer{border:1px solid;}
[/html]

The preceding style will be applied to all the footers available in a page.

NB: Please be noted that it is not recommended (Footer, FOOTER) to use upper-case in the elements.

Introduction to Canvas Element

If you want to create some graphic content, the Canvas element is the right choice.

Let us see how to use it.

Declaring the Canvas
[html]
<canvas id=“canvasExample” width=“200” height=“100”
style=“border:1px solid #ccc;”>
Bad Luck, It seems your browser won’t support 🙁
</canvas>
[/html]

Implementing Canvas
[js]
var c = document.getElementById(“canvasExample”); //Get the element
var ctx = c.getContext(“2d”); // Get the context for the element
var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
grd.addColorStop(0, “blue”); // Apply the colors
grd.addColorStop(1, “white”); // Apply the colors
ctx.fillStyle = grd; //apply the style
ctx.fillRect(10, 10, 150, 80); // Fill
[/js]

Here we are applying the gradient to the canvasExample canvas.

Introduction to SVG

Scalable Vector Graphics is for implementing graphics for the web as canvas. One of the differences between canvas and SVG is that SVG supports event handlers but canvases don’t. We will discuss that later.

Declaring SVG
[html]
<canvas id=“canvasExample” width=“200” height=“100”
style=“border:1px solid #ccc;”>
Bad Luck, It seems your browser won’t support 🙁
</canvas>
[/html]

See the complete HTML here
[html]
<!DOCTYPE html>
<html>
<body>
<table style=“border:1px solid #ccc;”>
<tr style=“border:1px solid #ccc;”>
<td style=“border:1px solid #ccc;”>
<h2 style=“text-align:center;”>Canvas</h2>
<canvas id=“canvasExample” width=“200” height=“100”
style=“border:1px solid #ccc;”>
Bad Luck, It seems your browser won’t support 🙁
</canvas>
</td>
<td style=“border:1px solid #ccc;”>
<h2 style=“text-align:center;”>SVG</h2>
<svg width=“200” height=“200”>
<circle cx=“100” cy=“100” r=“50”
stroke=“green” stroke-width=“4” fill=“yellow” />
Bad Luck, It seems your browser won’t support 🙁
</svg>
</td>
</tr>
</table>
<script>
var c = document.getElementById(“canvasExample”); //Get the element
var cctx = c.getContext(“2d”); // Get the context for the element
var grd = ctx.createLinearGradient(0, 0, 200, 0); //Create the line
grd.addColorStop(0, “blue”); // Apply the colors
grd.addColorStop(1, “white”); // Apply the colors
ctx.fillStyle = grd; //apply the style
ctx.fillRect(10, 10, 150, 80); // Fill
</script>
</body>
</html>
[/html]

I hope you have tried this. See you soon with another set of elements in the next article.

Kindest Regards
Sibeesh Venu

]]> https://www.sibeeshpassion.com/html-5-elements-in-a-look-part-2/feed/ 0