HTML5 Canvas Experiments

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

What I've got below are some canvas effects that will 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 to do it in JavaScript using the jQuery library.


* Method 1, Create 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 includes 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.
Copy the code below and paste it 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.
It'll display the colour below the form.









Colour Preview