Make a HTML5 Canvas Colorful Tile Board

Make a HTML5 Canvas Colorful Tile Board

We have already know how to draw shapes in html 5 canvas,now lets apply that knowledge to make something more interesting. We all love colorful environments. So lets create a Tile Board.


The IDEA


1.)A canvas with many tiles.

2.)Each tile will have its own different color.

3.)User will have the ability to redraw the Tile Board.


The IMPLEMENTATION

Now we will implement the idea.Lets get started.....,

Lets create a simple Html 5 file.




Now create a html 5 canvas.




Now Create a script tag and get the context 2d for our canvas.




Now lets set our initial coordinates to zero



Create a function to draw Canvas




Create a Function Tile maker to make tiles for us and lay them. To do this we need to give few things to function as parameters.First is Context itself as it will draw shapes.Next we need to give the Coordinates X and Y Then we need to give few more things like maximum width and height of tiled area.



Next, make an array to genrate colors.,





Next we'll do some looping


Next we will add a button So that user can change the Pattern if he don't like it.



Here is the End result



Please Share this post to support DeeCoder . You can subscribe to the blog to get the updates and please comment what you think about this post and what you want in next post








Comments

Popular posts from this blog

Things you really need to know about Cryptocurrencies

Best News Sites for web developers