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.


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.


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


Popular posts from this blog

How to make Make money with Inkscape

Creating Cookies in JavaScript

Awesome games made in Blender Game Engine

A Quick Look at Machine learning

Microsoft will Aquire Github for 7.5 billion dollars

Things you really need to know about Cryptocurrencies