At first, I had a hard time grasping the purpose and use of the save() and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand it better. Let’s look at an official definition of save() and restore() Each context maintains a stack of […]
Continue readingTag: HTML5
CSS 3.0 Series: The linear-gradient Object
Most everyone agrees that a gradient background softens web pages and areas of web pages in a pleasing way. Many webmasters use a gradient somewhere on their website. This makes a CSS solution a good candidate to be adopted into web standards and used by all major browsers. The old/current way to add a gradient […]
Continue readingHow to Drag and Drop on an HTML5 Canvas
We explored using keyboard input to move a shape on an HTML5 canvas here http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/. Now we’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse. UPDATE: I’ve added a companion post for IE compatibility. IE Compatible Canvas […]
Continue readingCSS 3.0 Series: The border-radius Property
The border-radius Properties The border-radius CSS properties can be used to give borders rounded corners. The radius applies also to the background even if the element has no border. We’ll be working with code for three different implementations of the border-radius properties. Soon all browsers will use the W3C recommended format but for now they […]
Continue readingGraphing Data in the HTML5 Canvas Element Part II
This is post 2 of a multipart series of posts. The first part can be found here… http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-i/ In this post we will do the following. Move the graph to the center of a larger canvas Add a meaningful background Add labels to the x and y axes This will allow us to go from […]
Continue readingMoving Shapes on the HTML5 Canvas With the Keyboard
In order to make games using an HTML5 canvas element, you need to be able to detect user input. This post shows how to capture keystrokes on the keyboard and use them to manipulate shapes on the canvas. This example is coded for readability and not for optimized operation. All you need is a text […]
Continue readingGraphing Data in the HTML5 Canvas Element Part I
One of the most popular applications of the canvas element in HTML5 is graphing data. In the first part of this multipart series we will start with a very simple example of how to plot data on a graph that is drawn on a canvas element. Then we can build on these basic concepts to […]
Continue readingHTML5 Keygen Element and Internet Explorer
The Keygen element has been around since the Netscape days. It works in Firefox, Opera and Safari but Not in Internet Explorer. Being an official part of HTML5 means that this will be available in IE9 or will it?
Continue readingThe Meter Element’s Raison d’être
The meter element’s future in the HTML5 spec continues to be uncertain. Is its utility as a way to avoid improper use of the progress element enough to justify its existence or is there more to this? The <meter> Element I decided to revisit the meter element as I had not fully understood it the […]
Continue readingSimple Animation in the HTML5 Canvas Element
HTML5 is generating all kinds of buzz these days. Some of the buzz is about HTML5 being a replacement for Adobe’s Flash. I don’t think it’s there yet but it’s certainly on the way to changing the way content is presented on the web. This is a description of a very simple animation in an […]
Continue reading