HTML5 Canvas Experiments

HTML5 has brought some exciting new advantages to the web development universe.
The canvas feature allows you to render graphics that are powered by Javascript, so it'll work on almost every device.

What I've got below are a number of canvas effects that are sure to blow your mind.

Converter

This will convert plain text to ASCII, Binary and Hex.








Want background colour rotation?

There are multiple ways of doing this, but today I will show you 3 ways how to do it in JavaScript using the jQuery library.


* Method 1, Create yourself a webpage in html, for example: index.html
Using jQuery 3.1.1, so add this to your head section https://code.jquery.com/jquery-3.1.1.min.js
Now copy the script below and put it in between some script tags,
This will rotate colours from white to black at 1 second intervals,
It's set for the body to change colour, so any body colour with rotate colours, it also include transparency so you can have between 0.00 - 1.00,
You can also edit the colour ranges it uses, any number between 0 - 255.

var rgba = function() { return 'rgba(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + (Math.random().toPrecision(1)) + ')'; }; setInterval(function() { $('body').css('background-color',rgba()); },1000);

Here is a link with the script for you.

* Method 2 of changing a background/element colour.
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.


$( document ).ready(function(){ $( "#colourchanger" ).on( "click" , function(){ var color = '#'+Math.floor( Math.random()*16777215 ).toString( 16 ); $( "body" ).css( {"background-color" : color } );})});

Here is a link with the script for you.

* Method 3 of changing a background/element colour using pad
Simply copy the code below and paste on to your webpage.
This also uses a button to change the colour.


function pad(s,i,c,r){ i=i+1-s.length; if(i<1)return s; c=new Array(i).join(c||" "); return r?s+c:c+s; }; pad("6",6,"6"); pad("0",0,"0",true); $( document ).ready(function(){ $( "#colourchanger" ).on( "click" , function(){ var color = "#"+pad((Math.random()*0x1000000<<0).toString(16),6,"6") $( "body" ).css( {"background-color" : color } );})});

Here is a link with the script for you.




Hex to RGB Colour Converter

Enter a 6 digit hex colour code and press the Convert button for your RGB output.









Colour Preview