with css
SVG Gradient
CSS Text Shadow

With the growth of the internet, more mobile devices and the increased amount of traffic, there are some new methods such as css3 and HTML5 which can be used to minimise the amount of requests sent by the users' browser.

This, in turn, reduces the amount of information needed to be sent over both phone lines and mobile networks and increases the amount of work done by the users' computer.

All this adds up to less traffic to and from one user, less data usage for mobiles and leaves more bandwidth for other users as more and more people get connected to the internet.

Another concern arising from increased bandwidth is how able we are to maintain the integrity of the cables that are layed down across the sea bed of some of the biggest oceans like the Atlantic.

More traffic and increased bandwidth causes the cables to heat up, distort and possibly break.This will mean repair and replacement along the sea bed which takes a lot of time and money.

Using a lot of images is one of the obvious file size concerns when designing a website, so using gradients, drawing a few shapes and possibly drawing some text can save on webpage download time and bandwidth.

This is page is a test using HTML5, the latest css and some javascript.. I've drawn several basic objects, one set inside a single canvas ( ' outside' & ' inside'), and one inside their own layers. Take a look at the source code to see the different technique needed for drawing within the same canvas, and the problems that arise by using this technique. Such as the conflict between fill styles and the inability to apply rounded corners to any svg/HTML5 type gradients...

I've also used some of the new css techniques, some of which don't yet work in all of the most popular browsers, however they all currently work in the latest Firefox and Chrome browsers.

I have tried to avoid using any images so as to try out some different gradient techniques using both the HTML5 canvas & java method as well as the HTML5 svg method.

However, in order to use the drawImage method I've had to.

One thing I like to use when designing a site is the use of drop shadows. This adds some depth and texture to any page.
By using the css box-shadow method to add drop shadows to images and layers, you can use an image without any shadow effect and have it applied to the image by the users' browser.
This will reduce the size of the image file that needs to be sent.

I also love to use gradients, but instead of creating an image and applying gradients with my imaging software, I can now use either of the HTML5/Java or SVG techniques.

Using these methods may seem a little tedious at first, but once you've got a few frequently used gradients perfected, you can just re-use them for any other site and change the colouring very easily.

I also like to use some transparency effects, laying a slightly transparent white (or any other colour) shape over the top of a black shape can create a button with some highlighting. I would usually use an image created using my usual drawing software, however these can now be created using the latest HTML techniques.

Unfortunately, I am unable to apply any rounded corners to this button using this method, which would bring you right back to using an image!!This also applies to the svg gradient fill technique.This is why the entire page gradient fill cannot be rounded off... big potential bandwidth saving and a common personal page design technique has just bitten the dust!

Update: SVG gradient fill layer corner rounding now working in the latest IE and Chrome browsers.

However, it is possible to use the latest webkit for grading the page,as with the main page background. As far as I'm aware this only works only Googles' Chrome, this method has been used to apply it to the 'inside' layer.

I have also used some of the opacity techniques in the main title, the outer glow is created by applying a css box-shadow at co-ordinates x,y (0,0).

The title text has been drawn using the fillText method.


Simple Image Placement
Java Image Slider
Place a Video
Draw an Image
Jquery Photo Gallery
There's still a few things to include on this site, such as animating a layer to follow a certain path and getting and using image data, back soon.....
The drawImage method above works well, although I haven't decided on how it could be useful.
Perhaps if you have a site with the use for repeating an image somewhere on the website, like a thumbnail, then it would save again on http requests as you can redraw and scale the same image.

I haven't tried scaling up yet, but the scaled down versions look very nice, no obvious loss of picture quality.

No video support