Question

On a web page that I am creating, I want to fill a rectangular area (let us say, the top half of the web page visible in a typical browser window) with about a hundred small rectangles:

1. Each rectangle (let us call this a cell) has its own colour, some text written inside it, and a border which distinguishes it from its neighbours.
2. The colour, shape and size of each cell, and the text which appears inside it is part of the input for making the web page : these depend on the user who is currently logged in, and changes periodically with time.

Given the data for all the hundred cells, how do I draw (and redraw) them on the web page? What technology should I use? HTML Tables/JavaScript/JQuery UI/HTML5 Canvas/ … ?

My background: I am reasonably comfortable with programming in general, but am not used to any of the newer technologies used for creating web pages, apart from basic html, some php, and JavaScript played by the ear. I will learn whatever is needed to get this done well.

Edit: In response to hamlin11’s question: The cells do not have any relationship to one another in general, except that they are guaranteed to fill the rectangular area. Here is an (imperfect) example of what they might look like, without the colours:

Answer 1

If this is a simple matter of drawing pre-calculated rectangles, I suggest using the HTML 5 Canvas.

Here is an example that shows drawing rectangles

I believe this is a good solution, because you can emit the HTML and javascript with whatever programming tool you are most comfortable with — and you don’t have to venture into javascript api’s.

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<button onclick="draw_square();return true;">Red Square</button> 
<script>
  function draw_square() {
    var c1 = document.getElementById("c1");
    var c1_context = c1.getContext("2d");
    c1_context.fillStyle = "#f00";
    c1_context.fillRect(50, 50, 100, 100);
  }
 </script>

References

• Reference
• http://www.tutorialspoint.com/html5/canvas_drawing_rectangles.htm
• http://falcon80.com/HTMLCanvas/BasicShapes/Rectangle.html
• http://vombat.tumblr.com/post/255461929/draw-rectangles-with-canvas-tag-in-html5
  • This link in particular should be helpful