I am using p5.js's VIDEO component inside a Sketch component. However, I am unable to style it.
I want to move it towards a bit right but it's stuck at the extreme left of my screen. I added paddingLeft for Sketch's css but it doesn't make a difference.
Similarly, I want the component to be placed at the top of the screen. However, it starts from the middle of the screen. Adding padding-left makes no difference at all. I believe the Sketch or canvas component has some sort of background/padding of it's own which I am unable to see.
export const Component: React.FC<ComponentProps> = (props: ComponentProps) => {
let capture: p5Types.Element;
const setup = (p5: p5Types, canvasParentRef: Element) => {
p5.createCanvas(390, 240);
capture = p5.createCapture(p5.VIDEO);
capture.size(320, 240);
}
const draw = (p5: p5Types) => {
}
return <Sketch setup={setup} draw={draw} className="sketch"/>
;
};
How can I move the video component towards the right and/or top of the screen?
Codesandbox: https://codesandbox.io/s/objective-wind-yx1gm?file=/src/Video.tsx