如何在Jade模板中启用Javascript访问DOM？

Question

I want to draw on a HTML5 canvas in a Jade template. To do this, I need to use some Javascript like this:

function tileAllCanvases(){  
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    //draw things
}

My Jade template is:

doctype html
html 
    head
        title = title
    body
        canvas(id="canvas",width="7000",height="4000",style="border:1px solid #d3d3d3;")
        script. 
            !{drawing.tileAllCanvases()}

The document.getElementById("canvas") call gives me the error document is not defined . I think this is happening because Jade is rendering the HTML server-side and therefore it can't access the DOM. So I guess I need to have this code called client-side. I tried adding the following to my Jade template:

script(src='../main.js', type='text/javascript')

instead of the script. call, where main.js is a file that, among other things, calls the canvas drawing code, but this caused an ERROR 404 NOT FOUND when I opened the page client-side. Maybe because the client-side code is looking for '../main.js' and of course it can't find it because that file is on the server.

So...what can I do to draw on a canvas element using code that's passed to Jade? Or, more generally, how do I draw on a canvas element in a page that I'm generating via a server-side rendering engine?

Edit: looks like I can use node-canvas to create a canvas-like object server-side, but I don't quite understand how to then include this data in the page that I'm rendering. I see that I can save the canvas object as a PNG and then stream it, but that makes things much more complicated because now I have to handle storage of these dynamically generated files...hopefully there's an easier way to include the node-canvas data in my page?

Answer 1

I figured out a solution for this using node-canvas. Basically it works like this:

const Canvas = require('canvas');

function drawOnCanvas(data,width,height){  
    let canvas = Canvas.createCanvas(width,height);
    drawThings(data,canvas);  //code for drawThings() is the same as with the DOM version of Canvas
    return canvas.toDataURL();
}

Call this function before rendering the page, so that dataURL can be exposed to Jade as a parameter:

const express = require('express');
const router = express.Router();
const Drawing = require('../drawing.js');

const drawing = new Drawing();
const dataURL = drawing.drawOnCanvas(someData,100,100);

router.get('/', function(req, res, next) {
    res.render('drawing', { 
        title: 'Drawing',
        dataURL: dataURL
    });
});

module.exports = router;

And then use dataURL to create the bitmap in the template.

doctype html
html 
    head
        title= title
    body
        img(src=dataURL)