How to Draw & Show Raster-Graphics in Internet Explorer via Pure HTML

Have you ever thought that if it is possible to draw raster-graphics, i.e., pixel based graphics in HTML? Isn’t it interesting if it could be possible?

So be ready to be amazed, because with the method that I’m going to describe, it’ll become possible.

Let’s start with the number of ways we can show graphics in our web-page. As we know, the standard ways are by using image tag, i.e., <img src="img_name.jpg"> and by using flash file, i.e., *.swf file (advanced way).

There is two more ways of doing this; one of them is by using CSS. But it is not supported by most of the web browsers. And I’m not going to describe that, as you could get many articles related to this on internet. Anyways let’s come to the point.

The fourth, most interesting way is by using pure html. This is the least known method, in fact nobody else has ever written about it.

So technically, the credit of its invention/discovery goes to me. ;)

The Technique!

We can create an image purely in HTML format by making a table similar to the size of the image, say 100 x 100; and defining the size of the cell equal to the size of a pixel, i.e., 1.

For example,

 <table cellspacing=0 cellpadding=0>  
   <tr>  
     <td bgcolor=#FF0000 width=1></td>  
   </tr>  
 </table>

The above code will show a single pixel of red colour on IE (Internet Explorer).

So if we can create on pixel, then we can also create a matrix of pixels. That means we can create an image which is in fact a matrix of pixels.

The technique is to define a colour for each & every cell, i.e., , of the table.

How this has become possible?

By defining the width of the cell equal to 1 and making cellspacing & cellpadding equal to 0.

Is the technique to lengthy? No problem!

To ease this job, I’ve created few functions in PHP.

Required Functions:

 // This function converts the given 2-D array of colours into HTML table of coloured cell.
 function MatrixToPixel($Matrix)  
 {  
   $output = "<table cellspacing=\"0\" cellpadding=\"0\">";  
   for($i=0; $i<count($Matrix); $i++)  
   {  
     $output .= "<tr>";  
     for($j=0; $j<count($Matrix[$i]); $j++)  
     {  
       $output .= "<td bgcolor=\"".$Matrix[$i][$j]."\" width=\"1\"></td>";  
     }  
   $output .= "</tr>";  
   }  
   $output .= "</table>";  
   return $output;  
 }

 // This function formats the given 2-D array by changing null value into the given value.  
 function FormatMatrix($Matrix,$bgcolor)  
 {  
   for($i=0; $i<count($Matrix); $i++)  
   {  
     for($j=0; $j<count($Matrix[$i]); $j++)  
     {  
       $Matrix[$i][$j] = ($Matrix[$i][$j] == null)?$bgcolor:$Matrix[$i][$j];  
     }  
   }  
   return $Matrix;  
 }  

Now, you have to use this function for conversion purpose. See below.

Sample1:

 function setPixel($val,$x,$y,$arr)  
 {  
   $arr[$x][$y] = $val;  
   return $arr;  
 }  

 function circlePoints($cx, $cy, $x, $y, $pix,$arr)  
 {  
   $act = $pix; //"#FF0000";  
   if ($x == 0)  
   {  
     $arr = setPixel($act, $cx, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy,$arr);  
   }  
   else if ($x == $y)  
   {  
     $arr = setPixel($act, $cx + $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx + $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy - $y,$arr);  
   }  
   else if ($x < $y)  
   {  
     $arr = setPixel($act, $cx + $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy + $y,$arr);  
     $arr = setPixel($pix, $cx + $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx - $x, $cy - $y,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy + $x,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy + $x,$arr);  
     $arr = setPixel($pix, $cx + $y, $cy - $x,$arr);  
     $arr = setPixel($pix, $cx - $y, $cy - $x,$arr);  
   }  
   return $arr;  
 }  

 function circleMidpoint($xCenter, $yCenter, $radius, $c)  
 {  
   $Matrix = array();  
   $pix = $c;  
   $x = 0;  
   $y = $radius;  
   $p = (5 - $radius*4)/4;  
   $Matrix = circlePoints($xCenter, $yCenter, $x, $y, $pix, $Matrix);  
   while ($x < $y)  
   {  
     $x++;  
     if ($p < 0)  
     {  
       $p += 2*$x+1;  
     }  
     else  
     {  
       $y--;  
       $p += 2*($x-$y)+1;  
     }  
     $Matrix = circlePoints($xCenter, $yCenter, $x, $y, $pix, $Matrix);  
   }  
   return $Matrix;  
 }  

 echo MatrixToPixel(FormatMatrix(circleMidpoint(50, 50, 50,"#FF0066"),"#FFFFFF"));  

This will draw a circle of pinkish-red colour.

Sample2:

 function lineSimple($x0, $y0, $x1, $y1, $pix)  
 {  
   $Matrix = array();  
   $dx = $x1 - $x0;  
   $dy = $y1 - $y0;  
   $Matrix[$x0][$y0] = $pix;  
   if ($dx != 0)  
   {  
     $m = $dy / $dx;  
     $b = $y0 - $m*$x0;  
     $dx = ($x1 > $x0) ? 1 : -1;  
     while ($x0 != $x1)  
     {  
       $x0 += $dx;  
       $y0 = round($m*$x0 + $b);  
       $Matrix[$x0][$y0] = $pix;  
     }  
   }  
   return $Matrix;  
 }  
 echo MatrixToPixel(FormatMatrix(lineSimple(10,10,100,100,"#FF0066"),"#FFFFFF"));  

This will draw a slant line of pinkish-red colour.

So you see we can draw graphics on Internet Explorer with pure HTML.



Fig: The screen-shot of the result generated by above code.

The only thing to keep in mind is this …

Drawbacks: Bigger the image, bigger will be its file size & longer will the processing time therefore longer would be loading time.

Limitations: It is supported by Internet Explorer only.

Usefulness: But it is useful in case of small images, say for about 10 x 10. As it could become highly dynamic with little more coding.