Once our canvas is ready, we set our drawing color and then draw our rectangle, which is really just a border. I'm using the ImageDrawRect() method rather than the ImageAddBorder() method since adding a border actually changes the size of the canvas; drawing a rectangle, on the other hand, gives us the complete freedom to create a border of any dimension we want in the current canvas size. I'm leaving out the sixth ImageDrawRect() argument, which is a flag for filling the rectangle (with the same color as the border itself, the drawing color); we want the light gray of the canvas color to show through.

Next we draw the Kinky Solutions text to the watermark. Before this action, we turn on the anti-aliasing to give the text a more pleasing rendering. When we draw the text onto the canvas, we give it the x and y coordinate and the text properties. The properties affect the font and size, but not the text color. Text color is determined by the general drawing color set for the canvas (i.e., SetDrawingColor()). It is also important to understand how text is drawn. I'm not sure why this is, but when drawing the text, the x and y coordinates are for the bottom left point of the text, NOT the top left. We're drawing our text at (14, 11), which you can clearly see is the bottom left coordinate:

And again when we paste this watermark on the source canvas, we want to paste with a 50% transparency. Notice this time though that we didn't turn on anti-aliasing for the source canvas. Our watermark has solid edges and a border. We don't really need this edge to be anti-aliased.
Running the code above, we get:

Clearly this is not as nice as the first demo (at least in my opinion), but it does give you the ability to create a decent watermark if you don't have Fireworks. Technically we could also have just drawn the watermark rectangle and the text directly onto the source image without having to create a watermark canvas; but, by creating a second canvas, I could demonstrate more ColdFusion 8 functionality.

In our first demo we dealt with a PNG watermark that had a transparent canvas. In our second demo we dealt with a watermark that had a rectangular opaque canvas. What happens if we want to create a transparent canvas from scratch? There may be a way to create a transparent canvas inherent to ColdFusion 8, but I couldn't find it in the documentation or figure it out on my own. Transparent canvases, however, are really useful for things like watermarking so being able to create them is important. In this next demo, I'll show you how to create a transparent canvas using a neat little hack.

This transparent canvas hack relies on the fact that ColdFusion 8 can read in image data stored in a Base64 encoding. What we do is read in a new image using Base64 data that represents a 1x1 transparent GIF image. This will create an image that is 1x1 with a transparent canvas. Then we just need to resize the image to the dimensions of our canvas.

In this next demo we'll create a transparent watermark canvas from scratch using the hack above. Then we'll draw the text, Kinky Solutions, blur the canvas, and paste it over the source image:

<!--- Read in the original image. --->
<cfset objImage = ImageRead( "./blue_eyes.jpg" ) />

<!---

Read in the spacer image. This is the Base64 encoding of a 1x1 transparent spacer GIF. This will let you create a transparent canvas without having to have the spacer image on hand. Here, I'm putting in the Base64 headers for demonstration (but they're not needed).

--->
<cfset objWatermark = ImageReadBase64(
     "data:image/gif;base64," &
     "R0lGODlhAQABAIAAAP///////yH5BAEHAAEALAAAAAABAAEAAAICTAEAOw=="
     ) />

<!---