HTML5 samples, showcases, tools, tutorials & more...

Posts tagged HTML5 canvas

HTML5 Tool Of The Day – iGrapher

May02
2012 Leave a Comment Written by Sophie.Y

HTML5 Tool Of The Day – iGrapher

iGrapher is a HTML5 canvas tool, also we may call it a canvas app. It is used for charting, analysis and prediction of different stock, currency and commodity markets. With this tool, you are able to make a schematic and technical drawing of different international stocks from the major markets. These stocks range from the FTSE to Dow Jones against different commodities including gold and global currencies. At the same time, you can also plot the news activity of a stock to make clear of the correlations between news reports and stock market movements.

READ MORE »

Posted in HTML5 Tools - Tagged ,

HTML5 Canvas 3D Sphere

Apr19
2012 Leave a Comment Written by Sophie.Y

Our new tutorial tells us how to create an animated 3D Sphere (through direct access to pixels on the canvas). The sphere itself moves around the canvas continuously. This example should work in  most modern browsers (like Firefox, Chrome, Safari and even in IE).

In the end, you should to get something like this:

HTML5 Canvas 3D Sphere

Here are our demo and downloadable package:

READ MORE »

Posted in HTML5 Tutorials - Tagged , ,

HTML5 Tool Of The Day – Paper.js

Mar19
2012 Leave a Comment Written by Sophie.Y

 

HTML5 Tool of the Day - Paper.js

Paper.js is an open source HTML5 canvas vector graphics scripting tool. Based on the Scriptographer environment, it is an incredible scripting plug-in for Adobe Illustrator. This HTML5 tool is more than just a wrapper, which has added benefits in creating vector directly with canvas. It also has a full library with a lot of highly useful tools that canvas alone doesn’t provide.

READ MORE »

Posted in HTML5 Tools - Tagged ,

5 Things I Love About HTML5

Mar09
2012 Leave a Comment Written by Sophie.Y

HTML is the predominant markup language for web pages. We could convey the message of web page layout, content, effects, and so on, through HTML. As the latest version of its series, HTML5 is revolutionizing the web. Although HTML5 hasn’t been set as the standard yet, its new features have already touched our hearts.

Here in this article, I would like to present to you five things that I get excited about from HTML5, which will definitely bring you a brand new web experience too.

1. New Layout Tags

We can see that the layout tags of HTML4 are the same in semantic meaning—div id=—so we can’t distinguish the content of each part. However, the HTML5 specification has added quite a few useful tags for structuring your markup. It defines sections of your web page as layout areas without needing a div tag. That is, your header is surrounded by the <header> tag, and your navigation is surrounded by the <nav> tag.

READ MORE »

Posted in HTML5 Basics - Tagged ,

Feel Free to Add HTML5 Shadow – 12 HTML5 Shadow Tutorials for your Design

Jan06
2012 Leave a Comment Written by Sophie.Y

As a language for structuring and presenting content for the World Wide Web, HTML5 is becoming more and more popular. People are expecting creations that HTML5 can bring to us. HTML5 shadow covers a sub-section of what is possible, including HTML5 canvas shadow, HTML5 text shadow and HTML5 drop shadow. HTML5 shadow can be created in HTML5 <canvas>. To offset HTML5 shadows with the Canvas, we can use the shadowOffsetX and the shadowOffsetY properties of the canvas context.

In this post, I present you 12 tutorials of HTML5 shadow examples. Hope you will enjoy reading those HTML5 shadow code!

1. HTML5 canvas shadow Off set Attribute

1. HTML5 canvas shadow Off set Attribute

 var canvas=document.getElementById("myCanvas");
 var ctx=canvas.getContext("2d");
 ctx.rect(20,20,100,80);
 ctx.fillStyle="red";
 ctx.shadowColor="black";
 ctx.shadowBlur=10;
 ctx.shadowOffsetY=30;
 ctx.fill();

READ MORE »

Posted in HTML5 Tutorials - Tagged , ,

HTML5 Tool Of The Day – SVG to HTML5 Canvas Tool

Dec16
2011 Leave a Comment Written by Sophie.Y

SVG to HTML5 Canvas Tool

SVG to HTML5 Canvas Tool converts SVG into an HTML5 Canvas JavaScript function. It helps people to experiment with Canvas. This online tool uses a modified version of the excellent Canvg library. Canvg usually renders the SVG immediately and does not output JavaScript READ MORE »

Posted in HTML5 Tools - Tagged , ,

HTML5 Tool Of The Day – CanvasLoader Creator

Dec12
2011 1 Comment Written by Sophie.Y

CanvasLoader Creator

The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders for your HTML projects. It is a lightweight JavaScript UI library which can be used to create spinners using the HTML5 Canvas object in modern browsers or VML in READ MORE »

Posted in HTML5 Tools - Tagged , ,