logo To Foot
© J R Stockton, ≥ 2010-03-01

Scripted Drawing and PNG File.

No-Frame * Framed Index * Frame This
Links within this site :-
This page needs JavaScript & include1.js
and wants styles-a.css.
NOT FOR MSIE ≤ 8

Plot

This page was written initially for my own use. It draws and writes on a canvas, as instructed by one or more JavaScript files. Drawings can be saved as PNG files. Windows Paint can, if necessary, read those and save the data in other graphics formats. Instructions are for Firefox 3.0 and Safari 4.0 on Windows XP sp3, and may need to be adapted for other systems.

The wide range of characters available in Unicode, in conjunction with simple absolute positioning, should allow easy (but perhaps laborious) setting of mathematical equations and chemical formulae.

Files

Read Sample Text
from lower down
on this page

I Timeout :        

Operation

First, read the rest of this page. Then set the "Files" field and press "Read Files". In some browsers, there may be a delay of a few seconds when that is first done.

Timeout (for file reading) should not need to be changed; see Check Local Links and Anchors.

Plotting is done on a yellow-bordered canvas. When that is completed successfully, the canvas is hidden. Its content is copied to a new lime-bordered PNG img, which appears above, before its predecessors. Each of those PNGs can be saved by using its context menu. The Wipe button removes them all.

The browser's JavaScript Error Console might usefully be opened.

Ignore the checkbox.

Code Files

The code filename extensions must cause reading into an iframe in the manner of TXT. The overall contents should be JavaScript code to draw on a canvas initially of size 560×400 pixels but resizeable by script. Rag is a reference to the canvas; CX is the (2d) context of the canvas.

Code files are executed in turn by eval. A global object Glob is provided for communication between scopes. Typically, the first file might be a general library, the second might be set-up for a number of related images, and the third might code a specific image.

The sample data files are at JS-CIRCL.TXT, JS-DASH2.TXT and JS-GRPHX.TXT.

See External Links for using canvas.

Sample Code

The parts of this demonstration graphic are logically unrelated.

Status

Does not work in MSIE ≤ 8+ (no canvas).

With the recent versions that I have, Firefox 3.0.15 and Opera 10.10 seemingly cannot put text on canvas, but Firefox 3.5.5, Safari and Chrome can.

"Save image as" is disabled in my Chrome 3.0.195.38 (like a known bug), but OK in my Firefox, Opera, Safari, Chrome 4.0. The image can be copy'n'pasted into Windows Paint and then saved.

Library

The routine in file JS-DASH2.TXT might be considered as the beginning of a set of library routines.

Pending?

Towards a better form of INCLUDE file (recursively?) - line starting //$i will give an include file name. All such lines will be processed before the code in the file is executed.

External Links

Home Page
Mail: no HTML
© Dr J R Stockton, near London, UK.
All Rights Reserved.
These pages are tested mainly with Firefox 3.0 and W3's Tidy.
This site, http://www.merlyn.demon.co.uk/, is maintained by me.
Head.