This class represents a two-dimensional graphics context. It produces an IDL (Image Description Language) object that can be rendered into a real image, using an instance of nokia.maps.gfx.Painter. The graphics context itself controls an IDL state and uses it to generate and IDL object.

 // Initialize local variables.
 var Color = nokia.maps.gfx.Color,
	  parseCss = Color.parseCss,
	  body = document.body || document.documentElement,
	  graphics,
	  painter,
	  image,
	  imageNode;

 // Create a new image with a size of 64x64 pixels.
 graphics =  new nokia.maps.gfx.Graphics();
 graphics.beginImage(64, 64, "This is my image");
 graphics.drawRect(16,16, 31,31);
 graphics.set("fillColor", parseCss("red",0.5));
 graphics.set("strokeColor", parseCss("black"));
 graphics.set("lineWidth", 1);
 graphics.fill();
 graphics.stroke();
 image = graphics.getIDL();

 // Create a DOM element from the image using the default painter.
 painter = new nokia.maps.gfx.Painter.defaultPainter();
 imageNode = painter.createElement(image, document);

 // Add this image node to the document.
 body.appendChild(imageNode);

The above example creates a square box with the dimensions 32 x 32 pixels an a 1 pixel wide black border, filled with semi-transparent red color. Each side of the box measures 32 pixels and the inner square (inside the border) is 30 x 30 pixels. The graphics context uses the same coordinate projection as the IDL itself. A path consists of points and each point is infinitely small. The default origin of the coordinate system is the center of the top-left pixel of the destination surface (image). This means that, by default, the coordinate (0,0) is projected to the center of the top-left pixel at the position (0,0) of the image being created. Therefore if lineWidth is set to 1 and a moveTo(1,1).lineTo(200,1) is executed, all the pixels from the position (1,1) to (200,1) are stroked with a one-pixel-wide brush. Because the line is infinitely small and runs through the center of each pixel, all the pixels under the pen are colored, resulting in a line that is 201 pixels long.

Repeating the same exercise, but with lineWidth of two pixels, results in a 203 pixel long and 3 pixel high line, where the pixels from (1,1) to (200,1) are fully filled with black color. In the pixel row from (0,0) to (202,1) and from (0,2) to (202,2) only half of each pixel is filled. This is because we use a two-pixel-wide brush through the center of each pixel from (1,1) to (200,1), which means that we have to stroke one pixel above and one pixel below the center of those pixels. Therefore from the center of the pixel (1,1) we stroke one pixel up, filling the top half of the pixel (1,1) and the bottom half of the pixel (1,0). We then stroke one pixel down, filling the bottom half of the pixel (1,1) and the top half of the pixel (1,2). This results in a completely filled pixel (1,1), while the pixel (1,0) and (1,2) are only half filled. As it is impossible in reality to fill half a pixel, the rendering engine simulates this effect by not making the pixel fully black, but by calculating a color value that takes half the current color and half the new color taking opacity into account. This can lead to unwanted effects, therefore we advice cuation with lineWidth values that are multiples of 2.

Hint: For a box with a specific outer or inner size, subtract the line width from or add it to the length of the side of the box. So if you want a box with an outer size of exactly 200 pixels and a border width of 3 pixels, reduce the width and height in the call to drawRect() by three, which means you need to call the method, specifying 197 as width and height. This results in a rectangle with an outer size of 200 x 200 pixels and an inner size of 194 x 194 pixels, with a border that is three pixels wide.