A common issue with developing web sites for customers is sometimes the unfortunate inability to install server side components for performing specific tasks. A common question asked by beginners to ASP is how to draw graphics and send them to the browser. Normally, this task requires either client-side Java or server side COM objects to get the job done, and it has generally been accepted that this will always be the case in pre-.NET environments.

The following class can change your attitude towards creating images

This class provides a simple canvas with which you draw things on, it is written in ASP and is initialised simply by:


<!--#include file="canvas.asp"-->
<%
Set objCanvas = New Canvas ' Create the object
objCanvas.GlobalColourTable(0) = RGB(255,255,255) ' First colour index to white
objCanvas.GlobalColourTable(1) = RGB(0,0,0) ' Second colour index to black
objCanvas.Resize 160,120,false ' Resize the canvas to 160x120, don't preserve the existing image
objCanvas.ForegroundColourIndex = 1 ' Set the drawing pen colour index to 1 (black)
objCanvas.Ellipse 100,100,30,20 ' Draw an ellipse in black, with two radii, 30 and 20 pixels
objCanvas.Circle 50,50,10 ' Draw a circle in black, radii of 10 pixels
objCanvas.Write ' Send the image to the browser
%>



Further instructions on using the class are included with the source files. This class supports the following drawing methods:

Copy X1,Y1,X2,Y2,X3,Y3 - Copy a region from X1,Y1,X2,Y2 to X3,Y3
Flood X,Y - Floodfill a region with the drawing pen colour, starting at X,Y
Line X1,Y1,X2,Y2 - Draw a line with the pen colour, from X1,Y1 to X2,Y2
Circle X,Y,Radius - Draw a circle at X,Y with a radius in pixels
Ellipse X,Y,Radius1,Radius2 - Draw an ellipse at X,Y with the two radii of Radius1 and Radius2
DrawTextWE X,Y,Text - Draw text from west to east at X,Y. Text is a string
DrawTextNS X,Y,Text - Draw text from north to south at X,Y. Text is a string
Clear - Clear the canvas to the current background colour index
Resize Width,Height,Preserve - Resize the canvas to Width and Height, set preserve to keep the current canvas image
Write - Send the image to the browser

And also the following properties:

Pixel(X,Y) - Sets or retrieves the current pixel colour index value
GlobalColourTable(Index) - Sets or retrieves the current global colour table RGB value
ForegroundColourIndex - Sets or retrieves the current drawing pen colour index
BackgroundColourIndex - Sets or retrieves the current background colour index
Version - Retrieves the current version of the class

The fonts definitions are included in font.asp, and can be redefined by editing this file. Instructions are also included in the accompanying documentation.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

More ASP Code Articles
More By aspfree

 

developerWorks - FREE Tools!

NEW! Evaluate IBM Rational Developer for System i V7.1 Download a free trial version of IBM Rational Developer for System i V7.1, which provides a complete development environment for traditional i5/OS application development. IBM Rational Developer for System i is a new eclipse-based workstation offering for i5/OS application development that provides a comprehensive Integrated Development Environment for edit/compile/debug of traditional RPG/COBOL/C/C++ i5/OS applications. FREE! Go There Now!

NEW! Hello World: Learn how to install and use the Rational Asset Manager Eclipse client In this tutorial, you can learn how to install and configure the IBM Rational Asset Manager Eclipse client, explore the different views in the Asset Management perspective, learn various search techniques, work with existing assets, and submit a new asset. FREE! Go There Now!

NEW! Hello World: WebSphere Service Registry and Repository Manage, govern, and share services across your organization by using WebSphere Service Registry and Repository. Follow the hands-on exercises to learn how to navigate the Web interface to publish, find, reuse, and update services. FREE! Go There Now!

NEW! Krugle, developerWorks, and code search Ken Krugler, co-founder of code search company Krugle, and Laura Merling, vice president of Marketing and Business Development for Krugle, join to talk about the ins and outs of code search and what it means as a new feature for developerWorks users. FREE! Go There Now!

NEW! Rational Asset Manager eKit Learn how to do more with your reusable assets with the free Rational Asset Manager eKit. The eKit includes demos on how Rational Asset Manager tracks and audits your assets in order to utilize them for reuse. Plus you’ll find white papers and a Webcast that discuss the challenges of a Service Oriented Architecture and how Rational Asset Manager can provide quick and effective solutions. FREE! Go There Now!

NEW! Rational Talks to You: Scott Ambler on being agile in a global development environment Join this Rational Talks to You teleconference on December 6 at 1:00 pm ET to participate in an agile application development discussion and get your questions answered on using IBM Rational Method Composer in a distributed environment.Get your questions answered! FREE! Go There Now!

NEW! The role of integrated requirements management in software delivery This paper is about the critical role that a discipline called integrated require­ments management can play in helping to ensure that your business goals and IT investments are continuously aligned—whether you are sourcing, integrat­ing, building or maintaining software. It also looks at ways that automated IBM Rational® products can work together to help you use requirements in the very best way. FREE! Go There Now!

NEW! Trial download: IBM Rational Manual Tester V7.0.1 Try the latest version of IBM Rational Manual Tester V7.0.1 by downloading a free trial from IBM developerWorks. This manual test authoring and execution tool promotes test step reuse to reduce the impact of software change on testers and business analysts and addresses the needs of teams performing at least a portion of their testing manually. FREE! Go There Now!

NEW! Trial download: IBM Rational Tester for SOA Quality V7.0.1 Get a free trial download of the latest version of IBM Rational Tester for SOA Quality V7.0.1, a functional and regression testing tool that enables the creation, comprehension, modification and execution of testing GUI-less Web services. FREE! Go There Now!

NEW! Webcast: WebSphere Process Server WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies. FREE! Go There Now!

All FREE IBM® developerWorks Tools!