Skip to main content

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.)There are going to be canvas with many many tiles.

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

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


Now we 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

Powerful Tips for writing better code and increasing productivity

Useful Tips for writing better code and increasing productivity

I entered the world of programming back in 2011. I had no formal education in programming, I just brought a book and started learning.Today when I look at my journey I realize it I made a lot of mistakes while learning programming and it's not possible to avoid all of them and according to me you should not avoid some of the mistakes that I am made, as these mistakes teach you a lot about programming but there are some mistakes that you should avoid no matter if you are a beginner or an intermediate or an expert. I am about to share some tips with you , you may have heard many of these earlier from other people or if you are studying in some school or university from your teachers or may be you never thought about these.

Variable Confusion

Tip #1  While writing your code please make sure that the variables are defined in a manner that even after 6 months when you read it you can distinguish between global and local v…

Things to master while learning a new programming language

Are you Learning a new programming language

While learning a new programming language we all get confused that what are things that we should focus on.There are many things to learning before diving deeper in any language.But its very hard, many times we are so overwhelmed by the advanced features of language or we want to accomplish something specific in short span of time that we don't put much effort in learning these basic concepts and then we realist that we are making silly mistakes.This happen even with experienced programmers.So here is a list of things to focus on while learning a new language.This may also help you to find right language to learn so, even if you are not learning a language right now but want to learn and you are not able to find the right one for you Keep reading it may help.........,

According to Wikipedia "the syntax of a computer language is the set of rules that defines the combinations of symbols that are considered to be a correctly …

Lets's Learn Document Object Model

Lets's Learn Document Object Model  The " DOM "document object model) allows JavaScript to access the content of a web page.The DOM is like a class monitor, where HTML elements are the like the students of a class.It monitors or keeps track of HTML documents. JavaScript is like class teacher it tell the monitor to do something. Or in other words JavaScript can manipulate HTML elements with DOM.

Show Me your ID
In DOM you can give  unique names to HTML elements, these are called Id of the element, further this id can be used by JavaScript to manipulate or access the HTML elements.To give id to an element you can use id attribute like this ;
<h1 id="Hello">Hello</h1>
ID Hello then can be then used to access the heading tag <h1> later by Javascript.
Let's Catch this guy Now, when we have the name given we can catch this guy and manipulate it. To use this element we use method document.getElementById in our script........( yaa...... ya... Jaa…