clear background

33 views
Skip to first unread message

Diego Alberti

unread,
Mar 19, 2021, 4:46:20 PM3/19/21
to Paper.js
Hi:
I'm trying to use paper.js to draw on top of an already drawn canvas.
my problem is (no matter what) when I add any shape the paper.js view is fulfilled on black occluding the previously drawn image.

It's quite impossible to paste real code so I'll try pseudo:

+ there's a canvas tag id "myCanvas"
+ paper.setup(canvas);
+ paper.view.autoUpdate = false;
+ another library renders a raster image on "myCanvas"
+ paper.js -> new paper.Path.circle(blabla);
+ paper.view.update()

the image does not appears. 
I'm pretty sure paper.js is filling with black because paper.view is smaller than the whole canvas. so I can actually see portions of the background image around.

I'm working with cornerstone.js a library for medical imaging.

make sense?
any though will be kindly appreciated.
thanks !


dx

 

Sean Johnson

unread,
Mar 20, 2021, 4:27:55 PM3/20/21
to pap...@googlegroups.com
I would suggest layering two canvases on top of each other using absolute positioning. The bottom canvas being your existing canvas, and the top being the paper.is one.

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/98206e20-4df7-41eb-b999-63a8f629f600n%40googlegroups.com.

Michael Sartore

unread,
Mar 20, 2021, 10:53:32 PM3/20/21
to Paper.js
Hi,
I had the same issue and solved it by adjusting the  "globalAlpha" property to 0.

Diego Alberti

unread,
Mar 21, 2021, 12:14:35 PM3/21/21
to Paper.js
thanks ! that's what actually did.
I'm gonna leave this here for further reference:


const canvas = evt.detail.element.querySelector('canvas.cornerstone-canvas');
var otherCanvas = document.createElement('canvas');
otherCanvas.setAttribute('style', 'position: absolute');
canvas.parentNode.insertBefore(otherCanvas, canvas);
paper.setup(otherCanvas);
paper.view.autoUpdate = false;

dx


Diego Alberti

unread,
Mar 21, 2021, 12:15:15 PM3/21/21
to Paper.js
thank you. solved already. ! I'll try it later anyway.
thx

dx
Reply all
Reply to author
Forward
0 new messages