Oversampling

The rendering of the fonts is very difficult in low resolution we are working. The screen is 72 pixels per inch or 96 pixels per inch, this is less than the quality of a fax. Printers are 300 or 600 DPI (dots per inch), photo setting is even 1500 DPI. Adobe uses some hints to display fonts properly with low resolutions, but must problems go away with more resolution.

What we can do here, is oversampling. For each pixel of the canvas, we calculate multiple pixels and then reduce the size of the result.

To enable oversampling, we need to adapt our code. First we create an operator setpagedevice. This operator gives information on the output device in form of a dictionary. It will pass many values to the output device in later chapters, for now it's just the key /oversampling. Note that setpagedevice is a standard PostScript operator but the content of the dictionary is not.

To apply the oversampling, we need to adapt rpnContext, scannFill and postScriptEditor. There is a new device dictonary in rpnContext with the oversampling value with default 1. Scannfill will scale the x, y, width and height values. And postScriptEditor will provide a larger ImageData object and we need also an offscreen Canvas to scale the image (two steps).

Javascript Editor

operators.setpagedevice = function(context) {
 const [d] = context.pop("dictionary");
 if (!d) return context;
 const dict = d.value;
 if (dict.oversampling) {
 const oversampling = Math.min(16,Math.max(1, dict.oversampling.value));
 context.device.oversampling = oversampling;
 context.data = new Uint8ClampedArray(context.width * context.height * 4 * oversampling * oversampling);
 for(i = 0; i< context.data.length; i++) context.data[i] = 255;
 }
 return context;
};

rpnContext = class {
 constructor() { 
 this.stack = [];
 this.heap = [];
 this.lasterror = "";
 this.currentcode = "";
 this.width = 600;
 this.height = 800;
 
 this.dictstack = [];
 this.dictstack.push({});
 this.graphicsstack = [];
 this.graphicsstack.push({ path: [], current: [], color: [0, 0, 0, 255], linewidth: 1, matrix : [1, 0, 0, 1, 0, 0] , font: "", size: 12, cachedevice : [0, 0, 0, 0, 0, 0] });
 this.data = new Uint8ClampedArray(this.width * this.height * 4);
 for(i = 0; i< this.data.length; i++) this.data[i] = 255;
 this.fontdict = {};
 this.device = { oversampling: 1 };
 }
 get dict() {
 return this.dictstack[this.dictstack.length - 1];
 }
 get graphics() {
 return this.graphicsstack[this.graphicsstack.length - 1];
 }
 error(s) {
 this.lasterror = s;
 this.stack.push(new rpnError(s));
 return this;
 }
 itransform(x,y) {
 const m = this.graphics.matrix; 
 const det = m[0]*m[3] - m[1]*m[2]
 return [ (x*m[3] - y*m[2] +m[2]*m[5] - m[4]*m[3])/det, 
(-x*m[1] + y*m[0] + m[4]*m[1] - m[0]*m[5])/det ]
 }
 pop(...parameters) {
 if (this.stack.length < parameters.length) {
 this.error("stackunderflow");
 return [];
 }
 const result = [];
 for (var p of parameters) {
 const data = this.stack.pop(); 
 if (p == "any") {
 result.push(data);
 } else if (p.includes(data.type)) {
 result.push(data); 
 } else {
 console.log(data.type+p);
 this.error("typeerror");
 return [];
 }
 }
 return result;
 }
 popArray() {
 var found = false;
 var arr = [];
 while (this.stack.length && ! found) {
 const value = this.stack.pop();
 if (value.type == "mark") {
 found = true;
 } else {
 arr.push(value);
 } 
 }
 if (! found) {
 return this.error("stackunderflow");
 }
 arr.reverse();
 const a = new rpnArray(arr, this.heap);
 a.reference.inc();
 this.stack.push(a); 
 }
 transform(x,y) {
 const m = this.graphics.matrix; 
 return [ x * m[0] + y * m[2] + m[4],
x * m[1] + y * m[3] + m[5] ];
 }
};

scanFill = function (path, width, height, color, data) {
   const crossings = []; 
   const oversampling = Math.sqrt(data.length / width / height / 4); 
   const width2 = width * oversampling;
   const height2 = height * oversampling;

for (var line of path) {
 var [type, x0, y0, x1, y1] = line;
 x0 *= oversampling;
 y0 *= oversampling;
 x1 *= oversampling;
 y1 *= oversampling;
 const dx = x1 - x0;
 const dy = y1 - y0;
 if (dy) {
 if (y1 < y0) { 
 [y0, y1] = [y1, y0];
 [x0, x1] = [x1, x0];
 }
 const ex = dx / dy;
 const y0c = Math.ceil(y0);
 var x = (x0 + ex * (y0c - y0));
 for(var y = y0c; y < y1; y++) {
 if (y >= 0 && y < height2) {
 if (! crossings[y] ) crossings[y] = [];
 crossings[y].push(x);
 }
 x += ex;
 }
 }
 }

for (var y in crossings) {
 const arr = crossings[y];
 arr.sort(function (a, b) { return a - b }); 
 for (var i = 0; i < arr.length - 1; i += 2) {
 var xstart = Math.floor(arr[i]);
 var xend = Math.floor(arr[i + 1]);
 var offset = ((height2 - 1 - y) * width2 + xstart) * 4;
 for (var j = xstart; j < xend; j++) {
 // we must check bounds 0 <= j < width2
 if (j >= 0 && j < width2) { 
 for (var c = 0; c < 4; c++) {
 data[offset + c] = color[c];
 }
 }
 offset += 4;
 }
 } 
 }

return data;

};

postScriptEditor = function(code) {
    const id = Math.floor(Math.random() * 1000);  // create unique id for console.log
    const node = document.createElement("DIV");   // build the HTML nodes
    node.id = "id" & id;
    node.className = "psmain";
    const node2 = document.createElement("DIV");
    node2.className = "editzone";
    node.appendChild(node2);
    const node3 = document.createElement("DIV");
    node3.className = "editheader";
    node3.innerHTML = "PostScript";
    node2.appendChild(node3);
    const node4 = document.createElement("FORM");
    node2.appendChild(node4);
    const node5 = document.createElement("BUTTON");
    node5.type = "button";
    node5.id = "button" + id;
    node5.innerHTML = "Run";
    node4.appendChild(node5);
    const node6 = document.createElement("TEXTAREA"); 
    node6.id = "editor" + id; 
    node6.className = "pseditor"; 
    node6.innerHTML = code;
    node6.rows = code.split(endofline).length + 1;
    node4.appendChild(node6);
    const node7 = document.createElement("DIV");
    node7.id = "console" + id;
    node7.className = "jsconsole";
   
    const node8 = document.createElement("CANVAS");
    node8.id = "canvas" + id;
    node8.className = "jscanvas";
    node8.width = 590;
    node8.height = 330;
    node.appendChild(node8);
    node.appendChild(node7);

console.log(node.outerHTML);  // add the node to the parent element

const script = `redirectConsole($id);
 run$id = function() {
 redirectConsole($id);
 const width = 590;
 const height = 330;
 const data = new Uint8ClampedArray(width * height * 4);
 // make it white
 for(i = 0; i< data.length; i++) data[i] = 255;
 const code = document.getElementById("editor$id").value;
 var context = new rpnContext; 
 context.data = data;
 context.width = width;
 context.height = height; 
 context = rpn(code, context);

console.log("stack: " + context.stack.reduce((acc,v) => acc + v.dump + " " , " ").limitTextEnd());
 if (context.lasterror) {
 console.log("rpn: " + context.currentcode.limitTextEnd());
 }
 console.log("graphics:")
 for (key in context.graphics) {
 console.log(key + ": " + context.graphics[key]);
 }
 console.log("fonts:")
 for (key in context.fontdict) {
 console.log(key);
 }
 console.log("dict:")
 for (key in context.dict) {
 console.log(key + " = " + (context.dict[key].dump).limitText());
 }
 if (context.heap.length) { 
 console.log("heap: " + context.heap.reduce( function(acc, v) { 
 const val = v.value; 
 if (Array.isArray(val)) {
 return acc + " [" + val.reduce( (acc2, v2) => acc2 + v2.dump + " " , " ") + "] "+v.counter+" ";
 } else if (val === null) {
 return acc + " ";
 } else {
 return acc + " (" + val + ") "+v.counter;
 }
 } , "").limitText()); 
 }
 const image = new ImageData(context.data, width * context.device.oversampling);
 const canvas = document.getElementById("canvas$id");
 ctx = canvas.getContext("2d");
 if (context.device.oversampling > 1) { 
 var nodebig = document.createElement("CANVAS");
 nodebig.width = width * context.device.oversampling;
 nodebig.height = height * context.device.oversampling;
 nodebig.getContext("2d").putImageData(image, 0,0);
 ctx.save();
 ctx.scale(1/context.device.oversampling, 1/context.device.oversampling);
 ctx.imageSmoothingEnabled = true;
 ctx.imageSmoothingQuality = "high";
 ctx.drawImage(nodebig,0,0);
 ctx.restore();
 } else {
 ctx.putImageData(image, 0,0);
 }
 };
 document.getElementById("button$id").onclick = run$id;`.replaceAll("$id", id).replaceAll("$code",code);
 const scriptnode = document.createElement("SCRIPT");
 scriptnode.innerHTML = script;
 document.body.appendChild(scriptnode); // run the script
};

This is the text without oversampling.

Javascript Editor

This one is with oversampling 2.

Javascript Editor

And this one is with oversampling 4.

Javascript Editor

The device has to be set before any drawing operators. Here is our justified text.

Javascript Editor

postScriptEditor(`10 dict begin /oversampling 2 def currentdict setpagedevice end

% prologue
% support procedures
% n1 n2 max result
/max { 2 copy gt { pop } { exch pop } ifelse } def

% text countblanks n
/countblanks { 10 dict begin /c 0 def { ( ) search { /c c 1 add def pop pop } { pop c end exit } ifelse } loop } def

% text width justifyshow -
/justifyshow { exch dup stringwidth pop 3 -1 roll exch sub exch dup countblanks 1 max 3 -1 roll exch div 0 32 4 -1 roll widthshow } def

% text width wraptext post width pre 
/wraptext { 10 dict begin /maxwidth exch def /text exch def
/linewidth 0 def
/linelength 0 def
/spaces 0 def
/spacewidth 0 0 moveto ( ) stringwidth pop def
text
{
% search leaves the post on the stack, so we assign it to currenttext
dup /currenttext exch def
( ) search { 
% add word width and check if linewidth is still not bigger than max
dup stringwidth pop linewidth add dup spaces add maxwidth le 
% add space and count characters
{ /linewidth exch def 
length 1 add linelength add /linelength exch def
/spaces spaces spacewidth add def
pop } 
% check if half space ok
{ 
spaces 2 div add maxwidth le
{ length 1 add linelength add /linelength exch def exit}
{ pop pop pop exit }
ifelse

} ifelse
} 
% no space found we are at the last word
{ pop text length /linelength exch def /currenttext () def exit } ifelse } loop
% remove trailing space character if not empty text
currenttext length { /linelength linelength 1 sub def } if 
% set text if only one word
linelength 0 le { /linelength currenttext length def } if 
% output 
currenttext maxwidth text 0 linelength getinterval end
} def

% text x y w l showjustifyblock y
/showjustifyblock { 
/l exch def
/w exch def
/y exch def
/x exch def w
{ wraptext 3 -1 roll dup 4 1 roll length { newpath x y moveto w justifyshow y l sub /y exch def } { x y moveto show pop pop exit } ifelse } loop y } def

% parameter
/bodystart 300 def
/linespace 33 def
/LM 20 def 
/RM 570 def
(CMUSerif-Roman) run
/CMUSerif-Roman findfont 33 scalefont setfont

% main
/linewidth RM LM sub def
/nextline bodystart def
(Acme Widgets was founded in 1952 by Dippy and Daffy Acme to produce high technology widgets for the growing aerospace market. Acme was quickly recognized as being the best widget works in the country. Continued investment in new technology and manufacturing methods has kept Acme Widgets in the forefront of this industry.)
LM nextline linewidth linespace showjustifyblock pop

showpage

`);

We have now 2115 lines ps20240829.js

My Journey to PostScript