Posts

Showing posts with the label HTML5

HTML5 Canvas - Basics

-
Image
In this post we will take a look at the HTML5 Canvas element and how to use it. What is canvas? HTML5 canvas element provides platform to draw stuff on it and also animate them. How to create a Canvas? Canvas is a html5 element, which is created as below: <canvas id="mycanvas" width="578" height="200"></canvas> How to get a handle to the canvas? In order to draw shapes or write text into the canvas, we need to get a handle to the canvas object. This could be done in javascript as below: <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');  //TODO </script> Entire html code: <!DOCTYPE HTML> <html>      <body>     <canvas id="myCanvas" width="578" height="250"></canvas>     <script>       var canvas = document.getElementById('my...
1 comment
Read more

HTML5 Form Fields

-
Image
In this post I'm going to write about HTML5 form fields.  HTML5 has introduced a lot of input controls, which would otherwise been very tedious to code using javascript. Note that if the browser does not support any of these controls, it would just render a plain text field. 1. Color Picker: <input type="color"/> 2. Range slider This input type displays a slider within min and max range of values. <input type="range" min="10" max="80"/> 3. Date  <input type="date"/> 4. Email <input type="email"/> 5. URL  <input type="url"/> 6. Datalist  <input type="text" list="states"/>  <datalist id="states">          <option value="CA">          <option value="TX">          <option value="FL">  </datalist> The datalist input type provides a sugges...
Post a Comment
Read more