n-riesco
commented
6 years ago The reason why you see a white canvas is that the text representation of a canvas tag doesn't contain any info about the state of the canvas. In this case dom.window.document.getElementById("main").outerHTML yields <canvas id="defaultCanvas0" style="width: 400px; height: 400px;" width="400" height="400"></canvas>.
The solution is to use a library that outputs SVG.
There are other minor issues with the code above. I'm sure $$.sendResult($$.html(dom.window.document.getElementById("main").outerHTML)) doesn't do what you want. $$.html(...) sends an html result to the frontend and it returns undefined. $$.sendResult(undefined) sends undefined to the frontend. Thus $$sendResult($$.html(...)) sends two results to the frontend (an html result and undefined). Most frontends expect only one execution result.
To update an output, Jupyter defines the concept of display. I recently introduced the function $$.display() for this purpose, but I haven't documented it yet (nor it's tested very thoroughly; I've just found issue #132). Here's how your code adapted to use $$.display()
// Set up jsdom
var JSDOM = require("jsdom").JSDOM;
// polyfill for window.performance.now()
require('usertiming')
// create div container for p5 using jsdom
var dom = new JSDOM('<div id="myp5-main">No canvas yet!</div>');
var window = dom.window;
var document = dom.window.document;
var screen = dom.window.screen;
// load p5 library
var p5 = require("p5");
// setup main display
var main = $$.display('myp5-main');
main.html(dom.window.document.getElementById("myp5-main").outerHTML);
var myp5 = new p5(function(p) {
p.setup = function() {
p.createCanvas(400, 400);
};
p.draw = function() {
p.background('red');
p.rect(30, 20, 55, 55, 5);
// send the canvas HTML result each time it's drawn
main.html(dom.window.document.getElementById("myp5-main").outerHTML);
};
}, 'myp5-main');Again, for this code to work:
- I need to fix #132
- you should use a library that outputs SVG
One last thing. It isn't a good idea to use const in a notebook (for the same reasons, it isn't a good idea to use it in a REPL).
abargnesi
westurner
Hello! I have been trying out
ijavascriptand cannot draw to a canvas using p5js.This codepen shows what I am trying to accomplish in a ijavascript notebook.
Here is what I have tried in a notebook using the asynchronous output pattern.
package.json
notebook
The output is blank although the canvas object is present in the outputted result within the
<div id="main"></div>container.Maybe for a canvas object there is a different mechanism to update the result in the notebook?