18 May 2014

Full page repeating grid pattern with pure HTML5 canvas

In this article iam going to show you a technique i use to generate pattern backgrounds without using images.
The patterns are dynamically generated using html 5 canvas.


To see the demo of a sample html5 pattern click here

Ok lets get started with a making a similar one.

first of all open up a basic html file like this

<html>
 <head>
  <title>canvas</title>
 </head>
 <body>
 <canvas id = "canvas">
     </canvas>
   
 </body>
</html>

The html 5 canvas tag is called in this page with an id of "canvas". Now,for resolving browser issues lets add a very basic css reset to eliminate margins and padding's that are predefined in the browsers.
*{ margin:0px; padding:0px; }

Ok now the core code comes in , this some basic JavaScript to control the canvas elements

      var a = document.getElementById("canvas");
      var ctx = a.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
         a.width = width;
         a.height= height;
         var i;
         var x,y;
         x=0;
         y=0;
         var  limit_h = height/10;
         var  limit_w = width/10;
         console.log(limit_h,limit_w);
        setInterval(function(){
                    for(i=0;i<limit_w;i++){
                         ctx.strokeStyle = "white";
                          ctx.fillStyle = "#acd200";
                        ctx.strokeRect(i*10,y*10,10,10);
                        ctx.fillRect(i*10,y*10,10,10);
         }
        y+=1;
           },0.1);
         
       
lets understand what is actually happening here first of all we use a built in JavaScript selector to select the element with the id "canvas", next retrieve the necessary drawing context for the canvas element.

After that we stored the height and width of the current browser window in  two variables called height and width.

we set the width and height of the canvas equals to the width and height of the canvas so that the grid must not appear handicapped when the users have different screen resolutions

Now we got the width and height of the canvas,but we need to set  a limit for the grid or else the loop will go on continuously and it will keep on eating the system resources. We cannot set the limit to static number since it would make our grid appear differently on various resolutions , moreover it would give our page a handicapped feel.

To fix that problem we used two variables limit_h and limit_w which basically means the gap between the each block , which is dynamically calculated by dividing the height and width of the page by 10, so that it would give a 10px margin .

Next we use a for loop to fill each block with a block and eventually fill the whole page with such grids/
The limit of the for loop is set to limit_w so that the loop should stop after the page is filled.

you can  play with values on the code pen demo page to get your own results.

Thanks for reading the tutorial . don't forget



7 comments:

  1. H ey can you make tutorial to make a grid that shows the cordinates when we hover over? just like photoshop info tool

    ReplyDelete
  2. Gonna try this now :) Thanks for the post

    ReplyDelete
    Replies
    1. try it out you can really make great patterns with other combinations without even using a image

      Delete
  3. The web developer do any kind of web development activity, as its mind is sharp and future is progressive.
    Ref - hire php developer

    ReplyDelete