error on form methods when using with an existing canvas

[cdaein]

I'm having an issue calling methods on form when it is created from an existing canvas.

When running this:

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 400;

const space = new CanvasSpace(canvas);
const form = space.getForm(); 
form.fill("black").point([200, 200], 100, "circle"); // error

I get an error:

Uncaught TypeError: Cannot set properties of undefined (setting 'fillStyle')
    at CanvasForm.fill (index.mjs:3824:17)

but when I console.log(form.fill) I can see the function declaration. I wonder if this is because of a mismatch between the raw CanvasRenderingContext2D and PtsCanvasRenderingContext2D, but haven't looked closely at the source code yet.

[williamngan]

Hi @cdaein, so the form needs to be inside a player function/object in space for it to render. Eg,

Pts.namespace(this);
const space = new CanvasSpace(canvas);
const form = space.getForm();
space.add( t => form.fill("#000").point([200, 200], 100, "circle") ).playOnce();

For quick sketching, you can also try the quickStart option:

Pts.quickStart( canvas, "#00F" )( t => form.fill("#fff").point([200, 200], 100, "circle") );

[cdaein]

Now I see I made a mistake... thank you for the help!