Render to HTML canvas and to PNG

In the precedent chapters we have built vector drawing from the ground up. We have shown that it is possible to construct graphic primitives as lines and curves and to fill and stroke them with pure mathematical methods using vanilla Javascript and operating on a simple array of bytes. We got quite far with a codebase that is only 70 kB of size and does not have any dependencies.

You can run it on any website
http:///www.belle-nuit.com/site/files/minimal3.html

But we can go a step further. Vector drawing is present in other image formats. It is natively supported in the HTML canvas, it is present in SVG and also in PDF. We might also render the vector drawing to bitmap images like PNG. We will now further add these formats to render our PostScript code. As interface, we will use the setpagedevice operator and implement it as devices.

In the rpnContext device dictionary will have a number of booleans that tell rpn to render to the devices:

raw (our canvas, this one is only true by default)
rawurl (our canvas as downloadable PNG file)
canvas (native canvas)
canvasurl (the native canvas as downloadable PNG file)
svg
svgurl
pdfurl

Furthermore, we will add modifiers for the rendering

oversampling (1 default), already implemented
width
height
color (0 = gray default, 1 = rob)
transparent (0 = false default, 1 = true)

And we add the console output optional

console

You will not have to provide an entire dictonary for setpagedevice. It will only change the values for the parameters you set explicitly. The code is quite straightforward and we do not check values like we did for oversampling as all values are just either false or true. setpagevice has to be used at start, as it resets the page device.

We will add two classes rpnRawDevice and rpnCanvasDevice. Each class implements initgraphics(), fill(), stroke() and showpage(). Both devices can render to a canvas and also produce a data URL for the downloadable PNG. The data is moved from rpnCanvas to rpnRawDevice. postScriptEditor adds devices to the nodes array to the rpnContext before running rpn().

The operators fill, stroke and showpage are simplified. They simply loop through the nodes and delegate the execution.

Javascript Editor

rpnRawDevice = class {
 constructor(node, urlnode) { 
 this.node = node; 
 if (!node) document.createElement("CANVAS");
 this.urlnode = urlnode;
 if (node) this.initgraphics(node.width, node.height, 1); 
 }
 initgraphics(width, height, oversampling) {
 this.data = new Uint8ClampedArray(width * height * 4 * oversampling * oversampling);
 for(var i = 0; i < this.data.length; i++) this.data[i] = 255;
 this.node.width = width;
 this.node.height = height;
 const ctx = this.node.getContext("2d");
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, width, height);
 }
 fill(context) {
 if (!(context.device.raw + context.device.rawurl)) return context;
 const flatpath = [];
 for (var subpath of context.graphics.path) {
 for (var line of subpath) {
 if (line[0] == "C") {
 const lines = bezier(line,-1);
 for (var elem of lines) {
 flatpath.push(elem)
 }
 } else {
 flatpath.push(line);
 }
 }
 } 
 this.data = scanFill(flatpath, context.width, context.height, context.graphics.color, this.data);
 return context;
 }
 stroke(context) {
 if (!(context.device.raw + context.device.rawurl)) return context;
 const w = context.graphics.linewidth / 2;
 const ad = Math.PI / 2;
 if (!w) return context; 
 for (var subpath of context.graphics.path) {
 var subflatpath = [];
 for (var line of subpath) {
 if (line[0] == "C") {
 const lines = bezier(line,-1);
 for (var elem of lines) {
 subflatpath.push(elem)
 }
 } else {
 subflatpath.push(line);
 }
 }
 var olda = [];
 var oldb = [];
 if (!subflatpath.length) continue;
 if (subflatpath[0][1] == subflatpath[subflatpath.length-1][3] && subflatpath[0][2] == subflatpath[subflatpath.length-1][4])
 subflatpath.push(subflatpath[0])
 for (var line of subflatpath) {
 const [type, x0, y0, x1, y1] = line;
 const a = Math.atan2(y1 - y0, x1 - x0);
 const x0a = x0 + Math.cos(a - ad) * w;
 const y0a = y0 + Math.sin(a - ad) * w;
 const x1a = x1 + Math.cos(a - ad) * w;
 const y1a = y1 + Math.sin(a - ad) * w;
 const x0b = x0 + Math.cos(a + ad) * w;
 const y0b = y0 + Math.sin(a + ad) * w;
 const x1b = x1 + Math.cos(a + ad) * w;
 const y1b = y1 + Math.sin(a + ad) * w;
 this.data = scanFill([ ["L",x0a, y0a, x1a, y1a], ["L",x0a, y0a, x0b, y0b],["L", x0b, y0b, x1b, y1b], ["L",x1a, y1a, x1b, y1b]], context.width, context.height, context.graphics.color, this.data)
 if (olda.length) {
 const [xa, ya] = lineIntersection(olda[1],olda[2],olda[3],olda[4],x0a, y0a, x1a, y1a);
 const [xb, yb] = lineIntersection(oldb[1],oldb[2],oldb[3],oldb[4],x0b, y0b, x1b, y1b);
 if (xa !== null && xb !== null) {
 this.data = scanFill([ ["L",olda[3],olda[4], xa, ya], ["L",xa, ya, x0a, y0a],["L", x0a, y0a, x0b, y0b], ["L",x0b, y0b, xb, yb],["L",xb, yb, oldb[3], oldb[4]],["L", oldb[3], oldb[4], olda[3], olda[4]]], context.width, context.height, context.graphics.color, this.data);
 }
 }
 olda = ["L", x0a, y0a, x1a, y1a];
 oldb = ["L", x0b, y0b, x1b, y1b];
 }
 }
 return context; 
 }
 showpage(context) {
 if (!(context.device.raw + context.device.rawurl)) {
 this.node.style.display = "none";
 if (this.urlnode) this.urlnode.style.display = "none";
 return context;
 }
 this.node.style.display = (context.device.raw) ? "block" : "none";
 const image = new ImageData(this.data, context.width * context.device.oversampling);
 const canvas = (this.node) ? this.node : document.createElement("CANVAS"); 
 const ctx = canvas.getContext("2d");
 if (context.device.oversampling > 1) { 
 var nodebig = document.createElement("CANVAS");
 nodebig.width = context.width * context.device.oversampling; 
 nodebig.height = context.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);
 }
 if (this.urlnode && context.device.rawurl) {
 this.urlnode.style.display = "block";
 const url = canvas.toDataURL();
 this.urlnode.href = url; 
 this.urlnode.setAttribute("download", "PS.png"); 
 } else {
 if (this.urlnode) this.urlnode.style.display = "none";
 }
 return context;
 }

}

rpnCanvasDevice = class {
    constructor(node, urlnode) { 
        this.node = node;
        if (!node) document.createElement("CANVAS");
        this.urlnode = urlnode;
        this.initgraphics(this.node.width, this.node.height, 1)
    }
    initgraphics(width, height, oversampling) {
        this.node.width = width;
        this.node.height = height;
        const ctx = this.node.getContext("2d");
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, width, height);
    };
    fill(context) {
        if (!(context.device.canvas + context.device.canvasurl)) return context;
        if (context.device.canvas) this.node.style.display = "block";
        const ctx = this.node.getContext("2d");
        ctx.beginPath();
        for (var subpath of context.graphics.path) {
           if (!subpath.length) continue;
           ctx.moveTo(subpath[0][1], context.height - subpath[0][2]);
           for (var line of subpath) {
               if (line[0] == "C") {
                   ctx.bezierCurveTo(line[3],  context.height - line[4], line[5],  context.height - line[6], line[7],  context.height - line[8]);
               } else {
                   ctx.lineTo(line[3],  context.height - line[4]);
               }
           }
        } 
        ctx.closePath();
        ctx.fillStyle = "rgb("+Math.round(context.graphics.color[0])+" "+Math.round(context.graphics.color[1])+" "+ Math.round(context.graphics.color[2])+")";
        ctx.fill();
        return context;
    }
    stroke(context) {
        if (!(context.device.canvas + context.device.canvasurl)) return context;
        const ctx = this.node.getContext("2d");
        ctx.beginPath();
        for (var subpath of context.graphics.path) {
           if (!subpath.length) continue;
           ctx.moveTo(subpath[0][1], context.height - subpath[0][2]);
           for (var line of subpath) {
               if (line[0] == "C") {
                   ctx.bezierCurveTo(line[3],  context.height - line[4], line[5],  context.height - line[6], line[7],  context.height - line[8]);
               } else {
                   ctx.lineTo(line[3],  context.height - line[4]);
               }
           }
        } 
        ctx.closePath();
        ctx.strokeStyle = "rgb("+Math.round(context.graphics.color[0])+" "+Math.round(context.graphics.color[1])+" "+ Math.round(context.graphics.color[2])+")";
        ctx.lineWidth = context.graphics.linewidth;
        ctx.stroke();
        return context;
    }
    showpage(context) { 
        if (!(context.device.canvas + context.device.canvasurl)) {
            this.node.style.display = "none";
            if (this.urlnode) this.urlnode.style.display = "none";
            return context;
        }
        this.node.style.display = (context.device.canvas) ? "block" : "none";
        if (context.device.canvasurl) {
            this.urlnode.style.display = "block";
            const url = this.node.toDataURL();
            this.urlnode.href = url; 
            this.urlnode.setAttribute("download", "PS.png"); 
        } else {
            if (this.urlnode) this.urlnode.style.display = "none";
        }
       
        return context;
    }

}

operators.setpagedevice = function(context) {
    const [d] = context.pop("dictionary");
    if (!d) return context;
    const dict = d.value;
    if (dict.canvas)  context.device.canvas = dict.canvas.value;
    if (dict.canvasurl) context.device.canvasurl = dict.canvasurl.value;
    if (dict.console)  context.device.console = dict.console.value;
    if (dict.color)  context.device.color = dict.color.value;
    if (dict.height) context.height = dict.height.value;
    if (dict.oversampling) {
        const oversampling = Math.min(16,Math.max(1, dict.oversampling.value));
        context.device.oversampling = oversampling;
    }
    if (dict.raw)  context.device.raw = dict.raw.value;
    if (dict.rawurl) context.device.rawurl = dict.rawurl.value;
    if (dict.svg) context.device.svg = dict.svg.value;
    if (dict.svgurl) context.device.svgurl = dict.svgurl.value;
    if (dict.transparent) context.device.transparent = dict.transparent.value;
    if (dict.width) context.width = dict.width.value;
    if (dict.height + dict.oversampling + dict.width) {
        for (n of context.nodes) n.initgraphics(context.width, context.height, context.device.oversampling);
    }
    
    return context;
};

operators.fill = function(context) {
    for (n of context.nodes) context = n.fill(context);
    context.graphics.path = [];
    context.graphics.current = [];
    return context; 
};

operators.stroke = function(context) {
    for (n of context.nodes) context = n.stroke(context);
    context.graphics.path = [];
    context.graphics.current = [];
    return context; 
};

operators.showpage = function(context) {
    for (n of context.nodes) context = n.showpage(context);
    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.fontdict = {};
 this.device = { canvas: 0, canvasurl: 0, color: 0, oversampling: 1, pdfurl: 1, raw: 1, rawurl : 0, svg: 0, svgurl: 1, transparent: 1 , console: 1 };
 this.nodes = [];
 }
 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] ];
 }
};

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 = "raw" + id;
    node8.className = "jscanvas";
    node8.style.display = "none";
    node8.width = 590;
    node8.height = 330;
    node.appendChild(node8);

const node9 = document.createElement("A");
    node9.id = "rawurl" + id;
    node9.innerHTML = "PNG raw";
    node9.style.display = "none";
    node.appendChild(node9);

const node10 = document.createElement("CANVAS");
    node10.id = "canvas" + id;
    node10.className = "jscanvas";
    node10.width = 590;
    node10.height = 330;
    node10.style.display = "none";
    node.appendChild(node10);

const node11 = document.createElement("A");
    node11.id = "canvasurl" + id;
    node11.innerHTML = "PNG canvas";
    node11.style.display = "none";
    node.appendChild(node11);

node.appendChild(node7);

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

This is the raw rendering as we had it.

Javascript Editor

This is the raw rendering to a downloadable PNG.

Javascript Editor

Now, directly render to canvas is more involving. Canvas supports drawing paths with the following context methods of interest for us:

beginPath()
moveTo(x, y)
lineTo(x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
closePath()
fill()
stroke()

The handling of y is reversed. Top is 0. The handling of the color is more complicated. It has separate fillStyle and strokeStyle properties using CSS strings.

This is the native rendering of canvas including a downloadable link.

Javascript Editor

We can also resize the page and disable the console

Javascript Editor

And our justified text

Javascript Editor

postScriptEditor(`10 dict begin /oversampling 2 def /canvas 1 def /canvasurl 1 def /raw 0 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

`);

This took us only 150 lines more. We have now 2267 lines ps20240905.js

and a working minimal website
http:///www.belle-nuit.com/site/files/minimal4.html

My Journey to PostScript