Question

I’m trying to make a sketchpad using Processing.js. My code is not throwing any errors, yet I cannot even get the canvas to appear. I have no idea what I’m doing wrong. Please help.

Here is my code:

function sketchPad(processing) {
    processing.size(300,300);
    processing.strokeWeight(10);
    processing.frameRate(30);
    processing.background(100);
    processing.stroke(300);
    processing.smooth();
    var x = processing.mouseX;
    var prevX = 0;
    var y = processing.mouseY;
    var prevY = 0;

    function drawLine() {
        processing.line(prevX,x,prevY,y);

        prevX = processing.mouseX;
        prevY = processing.mouseY;
    }

    processing.draw = function() {
        if (processing.mousePressed == true && processing.mouseX > 0) {
            drawLine();
        }
    }

    var canvas = document.getElementById('canvas1');

    var processingInstance = new Processing(canvas, sketchPad);
}

This code does not produce any error, but at the same time nothing is appearing. Ideas?

Answer 1

You’re not seeing the canvas because the call to display it needs to be outside of your sketchPad method.

function sketchPad(processing) {
    // Your code goes here...
}
var canvas = document.getElementById('canvas1');
var processingInstance = new Processing(canvas, sketchPad);