thecoop
thecoop

Reputation: 46128

Drawing arbitary pictures on a webpage

I need to display a runtime-generated image (mostly consisting of nice-looking boxes, lines and text) on a webpage. We're currently using ASP.NET MVC3.

The problem is, I haven't really done web development before, and I have no idea how to go about drawing an arbitary diagram on a webpage. Do I use some sort of javascript? How, and what do I use? Do I generate the image on the server somehow and simply display it? Something else?

I have no idea where to even start, let alone solve the actual problem...

Upvotes: 0

Views: 220

Answers (2)

StriplingWarrior
StriplingWarrior

Reputation: 156624

Roy Dictus fairly well described the overall approach you'll want to take. If you decide to target modern browsers and use javascript, I'd suggest you look at Processing.js. It's a javascript port of a popular Java library, and the web page has some code samples to show how you can create both static drawings and animations with some simple code.

Upvotes: 1

Roy Dictus
Roy Dictus

Reputation: 33139

It depends on the target browser.

If you target the most modern browsers, you can use an HTML5 Canvas and draw on it using JavaScript (see http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/).

If you're targeting other browsers (as well), the easiest is probably to generate an image on the server side (GIF/JPG/PNG). Your HTML page then contains an IMG tag with the SRC parameter set to the page that generates and returns the image. You can find an example at this page: http://www.sitepoint.com/generating-asp-net-images-fly/ (this uses ASP.NET to generate the image).

Upvotes: 2

Related Questions