HTML5 canvas export as png or jpeg

Hello, Today we will see how we can export our canvas to an image in well known formats png jpeg I will also give you a trick to download a file the HTML5 way using the new download attribute that ships with HTML5 out of the box Lets start with declaring our markup The Markup [crayon-5905037b5d7c2928011146/] Above markup is pretty much what I have used in my previous posts so it must be now familiar to you. Notice our anchor tag has a click event handler. Lets now check what JavaScript functionality is required. There are gazillion ways to do what I have done below so don't judge on the code but rather see how our problem is solved.   The JavaScript [crayon-5905037b5d7d2720620881/] So we are just drawing a string "This canvas will be exported" on our canvas and our exportCanvas() method is responsible for exporting our canvas to an image file that opens in new window from where users can right click on the image and save it on their disk. Notice this line [crayon-5905037b5d7da203202797/] Thats where we are telling our canvas function to export it as png file. To export it as jpeg do this instead [crayon-5905037b5d7e0696938261/] Demo http://jaspreetchahal.org/examples/html5/canvas-image-export.html Above is just a basic usage example. But you should get an idea Another way to force download an image using JavaScript would be to feed our canvas data URL to an anchor href with download attribute as shown below The Markup (method 2 - force download) Be aware that this works only on browsers that supports download attribute such as Google Chrome. We will change our exportCanvas() method in a sec. [crayon-5905037b5d7e6633396342/] The Javascript Updated exportCanvas() method is shown below [crayon-5905037b5d7ec809769060/] Remember that this is just a pointer. How you end up using above functionality is solely upto you. Also remember that download attribute is not supported in majority of … [Read more...]

HTML5 draw image on cavas with example

Hello, HTML5 canvas is such a good subject to write on and to learn. Eveyday you learn something new. Today we will find out how we can draw an image on our canvas. We can use this feature to set a background image to our drawing if we like. Here is our final result as shown below Now lets check how to do it. Canvas Markup [crayon-5905037b5f101675270319/] The Javascript Now lets look at our Javascript [crayon-5905037b5f10d265213121/]     As you can see that its that simple. Few key points that you should keep in mind context.drawImage(imageElement,x,y) is the function we will use to draw actual image. It is important that image is loaded to be able to be drawn. That is why we used img.onload event. Path to image can be local, from internet, absolute or relative.   Anything that you draw after drawing the image will appear above the image. Like that way we wrote "hello jas" text. In the next post I will show you how to save our canvas drawing to a file. I hope that you found this post useful. Just in case I got any fact wrong please let me know. Learning together is something that is always helpful. Cheers … [Read more...]

HTML5 battery API

G'day I am happy to be back from holidays from New Zealand. Very nice place to visit. Anyway this post is about HTML5 Javascript battery API. Currently only Firefox (latest) and Chrome (latest) supports it. Before you jump further into this post You gotta ask yourself what are real world use cases for batter API. Let me tell you a few If your HTML5 app makes too many requests to server to get the updates from server, you can infact slow down re-polling if battery is less than N% If battery is less than n% then you may alert user when they try to access, load videos, images etc. In other words things that require more firepower from device to load. and there could be other gazillions use cases that could fit you Above all its good to have something than nothing. A full spec can be found here http://www.w3.org/TR/battery-status/ Lets now look at whats required to get on with Battery API First we will get the battery object. Because only a couple of browsers have it implemented so its a good idea to get it like as shown below [crayon-5905037b5f72c889786960/] navigator.battery will be available when every modern browser offers battery support. But as you can see that prefixing battery with webkit (chrome and safari) and moz (firefox) is essential at the time of writing.     Key properties of battery object Now lets look at the key properties of battery object charging Represents if the system's battery is charging. chargingTime Represents the time remaining in seconds until the system's battery is fully charged. dischargingTime Represents the time remaining in seconds until the system's battery is completely discharged and the system is about to be suspended. level This property will be most used by you perhaps if you ever touch battery API.  Represents the current battery level scaled from 0 to 1.0. How do you use above properties is shown … [Read more...]

html5 canvas circle with gradient fill example

G'day, A friend asked me a question on how to do a gradient circle in HTML5 canvas. To be honest I never used gradients before so it was fun to find it how to do it. It was easy and didn't take me to long that functions such as createLinerGradient() createRadialGradient() exists in canvas context API to make use of So lets go ahead and check out how this is done Normal steps include to mention the markup first The Markup [crayon-5905037b602b1197790841/] So we just created a 500x500 canvas now lets jump into our JavaScript section to see how we can draw a circle.   The Javascript [crayon-5905037b602bc212658018/] Above code will give us a circle as shown below But thats not gradient you will say right, because we have drawn it yet. so lets draw a radial gradient circle A radial gradient circle in html5 canvas [crayon-5905037b602c3247165082/] As you can see that we are making use of function createRadialGradient(). Here is definition of this function [crayon-5905037b602ca018752034/] The Result     Lets use the same technique to create a Linear gradient circle. Code is given below HTML5 canvas circle with Linear gradient [crayon-5905037b602d0040037539/] The Result The result will look like this Here is details of params accepted by  createLinearGradient() function [crayon-5905037b602d7652193598/] I hope that this helps. If you think there is some error or code can be improved please leave your comments. I appreciate every ounce of feedback. You can try various things by making small changes to the supplied code to get your understanding on Gradients more firm. Cheers,       … [Read more...]

HTML5 canvas learning paths a simple sketchpad example

Hello, This is my follow up post from my previous post that you can read if you haven't already that briefly introduced HTML5 canvas. From here on we will be covering canvas in a little bit of more depth. What better way than to learn by example. So to understand how Lines and paths works in canvas we will be create a basic sketchpad. A demo link will be available at the end of this post. As I said in one of my previous post that HTML5 itself is just tags, attributes, definitions etc. What makes is strong is the API that it makes available through JavaScript. Before I go on further, there is a cool cheat sheet available from http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf You can download it or just print it. Its sort of quick reference to functions and properties of canvas Here is a screenshot what we are aiming for.   Pardon me if you think that above is not so cool. I think my handwriting is better than what you see above :) Anyway lets get back to business. Problem: Create simple sketchpad on which user can draw To start with here is our HTML code for our canvas element [crayon-5905037b60b4f797745142/] So nothing new above as we have seen already how to create one before. Remember that this example only touch base few API methods that you should be aware of when you deals with paths Now lets jump back to our JavaScript logic. First we will add onload listener to boot up our application as shown below [crayon-5905037b60b5b571948543/] [crayon-5905037b60b61653723950/] Now we will write a function called bootSketchPadas shown below [crayon-5905037b60b66270643456/] [crayon-5905037b60b6c843414450/] Now lets go ahead and init some defaults as shown below [crayon-5905037b60b71964663184/] So as you can see that we used a few context properties to initialize an action. We are checking if canvas context exists else we are returning from function. Above are really basic … [Read more...]

HTML5 introduction to canvas beginner tutorial

G'day, Following up from my previous post in which we talked about new form input types and attributes that you should know, this post is just a brief introduction to new HTML5 element called canvas is an element to which we can draw shapes, text and do various advanced things through JavaScript API. Canvas is an immediate mode bit mapped area of the screen that can be manipulated through JavaScript API. Immediate mode in my reference above refers to the way the canvas renders pixels on the screen. When you draw anything on canvas it redraws everything on every action we take through JavaScript API calls. We can draw shapes like arc, line, curves etc.  canvas uses a grid system where every pixel on a drawing area is available through x,y coordinates. The grid looks like one shown below for a 200X200 canvas. So as you can see that how x and y coordinates are mapped. x value increase from left to right → y value increase from top to bottom ↓ Before we go ahead I would like to make a point here. If you are not comfortable with JavaScript then maybe a good introductory JavaScript tutorial is something I would recommend. Please note that most of my examples will work on all browsers but the code is primarily tested on Google Chrome. I recommend to use the latest version of your favourite browser. IE8 or older does not support canvas Problem: A canvas with text "Hello canvas" with some styling 3 important properties/attributes for canvas are as follows id: Used to reference and get hold of through javascript width: width of your canvas height: height of your canvas The mark for our example [crayon-5905037b6148f367136532/] As you see that we have created our canvas element. I hope that you remember noscript tag and the way we pass on a message to the user in case script tag was not supported. We can do exact same thing with canvastoo. As you can see from our demo markup that I have left a string "Your browser does not support … [Read more...]

HTML5 form elements, new input types and attributes that you should know about

Hi Guys, Following up from my previous post in HTML5 category which talked about handling browsers for detecting HTML5 features and react accordingly, In this post we will be talking about some of the cool additions/updates made to traditional forms. We have been using Javascript to do many things for us like a number spinner box. It would be good to know that the new form input box types are there to support many things like spinners, date box, time etc out of the box. I will be concentrating on explaining attributes and types that are supported by most of the modern browsers. IE once again is lagging behind so I will just point out that if a feature is not supported in IE. I will throw a couple of examples to handle those situations in which Internet Explorer or any other browser does not support a feature. The Problem: Create a web form with new HTML5 input types to create a new profile The problem looks logical to me and we will touch base on each attributes that we would use. I will also throw some links to useful resources at the end of this article. The markup [crayon-5905037b61db0017493636/] [crayon-5905037b61dbc036881522/] Demo Here is a link to form we have designed above. We will be looking into more details in a moment. http://jaspreetchahal.org/examples/html5/html5-web-form-example.html Browser support Most of the above used input types are well supported in Chrome, Firefox, Opera and Safari. None of them is supported in Internet Explorer 9 or older at the time of writing. There are many new types that I have used above that I want you to know at least. There are others as well but not that widely supported but we will touch base on those in a moment but lets. Lets now look more closely on all the input types The best thing for me that has happened with HTML5 is built in form validations. Isn't that nice. Lets check what new input types we've used and how they work. We will also touch base on types that we haven't … [Read more...]

HTML5 handling browsers

G'day, This post is followup from my previous post In previous post we explored code example for many new elements including progress, meter, mark, time, details etc if you haven't already then may be you can read it if you wish. Today we will talk about few techniques to make sure that you handle your browsers right for any given HTML5 feature. It is important. Why? because not every browser supports every HTML5 feature. e.g. is not supported in older Internet explorer browsers such as IE8 and older but people are still using IE6 for instance but most of the websites don't really care for that. But its important still that you keep supporting older browsers such as IE8 that is still used by millions and IE8 is not very good at supporting HTML5. Ok so lets check what I have in store for you. We will be looking at Testing for HTML5 features using traditional Javascript Adding support to new elements in typical Javascript way CSS reset HTML5 Boilerplate Modernizr Some handy sites Testing for HTML5 features using traditional Javascript Ok! HTML5 is great and so are the features that comes with it. Features such as Geo Location, Desktop notifications, Web form elements, Adding audio/video to your page etc etc. but all of them are not available in all browsers. So how do we go and test for these. Lets check it out now Say for example I want to show desktop notification to a user and it required a fallback if this given feature is not supported. Here is how we can check that [crayon-5905037b626d5804474445/] In the above example our if condition check if window.webkitNotification is not undefined, if it is then handle you fallback in else Lets check another examples for Geo Location API availability [crayon-5905037b626e1479465318/] Lets check if canvas is supported by a browser [crayon-5905037b626e7879493191/]   Its actually that simple. Above is how you do it with making sure that a feature … [Read more...]

HTML5 new elements details, time, address, mark, progressbar and meter

Hello, If you haven't already then you may want to read my previous post that highlights some popular HTML5 tags. Link to that post is http://jaspreetchahal.org/html5-new-elements-to-define-page-layout/This post is continuation to the previous post and we will touch base on a few more elements and I will tell you which element are no longer part of HTML5 before we jump onto other topics. Ok so lets first of check which elements made their way out  is gone,  Instead use  is gone,  Instead use  is gone,  Instead use CSS styling  is gone,  Instead use CSS style text-align:center , and  were a nuisance and they are dead now, even though you still can use iFrame  Old fashioned way to set text font is gone, instead use CSS styles  is gone, instead use CSS style text-decoration:strikethrough or ,  are dead too. Use CSS styles instead If you know any other element that are gone please let me know, so that I can update above list. Ok so now that we know that above mentioned elements are gone, so it makes more sense not to use them anymore. let's go ahead and check elements like details, time, address, mark, progressbar and meter To know better lets do another web page that will explain their usage. The problem: create profile page showing way to use details, time, address, mark, progressbar and meter element Alright lets build a simple profile page that will show usage of above mentioned tags, We will use them in context. Here is an example with Demo [crayon-5905037b636b3024312995/] Here is a demo for above code. Demo Try it in Chrome, Firefox, Safari or IE10 element is not yet implemented in Internet explorer. http://jaspreetchahal.org/examples/html5/html5-new-elements-example-2.html A bit explanation on new tags details Well! this is such a powerful addition, at the time of writing only Chrome supports tag. Ask yourself a question, how many time in your web programming career you used javascript to show hide … [Read more...]

HTML5 new elements to define page content and structure

G'day, Following up on my previous post http://jaspreetchahal.org/html5-introduction-and-tutorials-cookbook-style-series/ where I give a brief insight on what HTML5 is and I started a cookbook style series to explain few things. The posts will stay to the point and will ask you to explore more. Ok! So lets talk about new elements introduced in HTML5. I will only list most popular ones and are being used now. Here is the list of new elements (this is not a complete list but one that I think you should know at least, please check this resource) - defines an article - header section - website navigation goes here - defines a section on a web page - footer of your website - content that is on side. mainly used for sidebars - Group h1 - h6 when multiple headers are used. - for showing and hiding details of certain information - highlighted text - defines sound content - defines movies or playback content - this is awesome addition and allow you to draw directly on a section on your webpage through Javascript - wraps an image and its description - Caption given to an Image - If you want to host external application written in other languages. (updated from THML4.1)   Ok so thats my list but remember there are heaps of other tags that you should be aware of but elements such as of progress, meter, etc are not supported in Internet explorer. We will talk about canvas element in cool set of tutorials to come. but lets concentrate on few of the above mentioned elements that defines (semantic structure) our web page.  You are not forced to use any of above elements but the mentioned elements gives semantic meaning to your page content. Lets now create a full fledge page using our above mentioned elements, that will give you more understanding how these works. Problem: Create a new page layout using HTML5 elements Ok so cookbook style posts are not there to discuss what each element does but rather focus … [Read more...]