Creating our image

The first step to creating our image is to create a canvas to work with. We do this by using the imagecreate function, as shown below:

<?php

$img_number = imagecreate(100, 50);

?>

The imagecreate function creates a blank canvas. The width and height of the canvas are determined by the two parameters passed to the function respectively. So, in our example above, we have created a new image that is 100 pixels wide, by 50 pixels high.

The next step is to allocate the colours that will be used to generate our random number image. We use the imagecolorallocate function to do this. The imagecolorallocate function takes four arguments. The first is the image identifier, which in our case is $img_number. The last three arguments specify the RGB values of the colour that we are creating. RGB (red, green and blue) values range from 0 (the darkest) to 255 (the lightest). For example, black is 0, 0, 0 and white is 255, 255, 255. Let's create a couple of colours:

<?php

$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

?>

As you can see, we have created three new colour-allocated variables: $white, $black and $grey_shade. These will be used to create the different shapes and text for our image.

Now that we know how to allocate colours, why don't we add a rectangle or two to our image canvas?

<?php

$img_number = imagecreate(100,50);
$white = imagecolorallocate($img_number,255,255,255);
$black = imagecolorallocate($img_number,0,0,0);
$grey_shade = imagecolorallocate($img_number,204,204,204);

imagefill($img_number,0,0,$grey_shade);
ImageRectangle($img_number,5,5,94,44,$black);
ImageRectangle($img_number,0,0,99,49,$black);

?>

The imagefill function performs a complete fill of the canvas identified by the first argument, $img_number. Arguments two and three specify the x and y co-ordinates to start filling from. The last parameter is a variable created using the imagecolorallocate function.

Next, we draw two rectangles using the ImageRectangle function. The first argument to the ImageRectangle is a reference to a drawing canvas created using the imagecreate function. The next four arguments specify the top left-hand corner of the rectangle, as well as the lower right-hand corner. The last parameter is a reference to a colour, created using the imagecolorallocate function.

In our example, we have created a new image canvas, filled our canvas, and added some rectangles, but where is the image you might ask? Good question. At this point in time, our image is still stored in memory. It's really quite easy to display the image in a web browser, so let's do that now!!