Skip to main content
Version: Next

Module: CanvasView

Interfaces

Functions

Canvas

Canvas(props): Element

A canvas component providing drawing functions similar to 2dcontext.

export default function App() {
const [drawingContext, setDrawingContext] = useState<
CanvasRenderingContext2D
>();

const handleContext2D = useCallback(
async (ctx: CanvasRenderingContext2D) => {
setDrawingContext(ctx);
},
[setDrawingContext],
);

useLayoutEffect(() => {
const ctx = drawingContext;
if (ctx != null) {
ctx.clear();

ctx.fillStyle = '#fb0fff';
ctx.fillRect(40, 160, 64, 72);
ctx.strokeStyle = '#00ffff';
ctx.lineWidth = 6;
ctx.strokeRect(40, 160, 64, 72);

ctx.invalidate();
}
}, [drawingContext]);

return (
<Canvas style={StyleSheet.absoluteFill} onContext2D={handleContext2D} />
);
}

component

Parameters

NameType
propsCanvasProps

Returns

Element