Canvas

Overview#

A drawing surface for shape primitives. Behaves like a <native:column> for layout purposes — children stack vertically by default. Use it as a semantic wrapper when grouping shapes.

Copied!

<native:canvas :width="200" :height="200">
    <native:rect :width="100" :height="100" bg="#3B82F6" :border-radius="8" />
    <native:circle :width="50" :height="50" bg="#EF4444" />
</native:canvas>

<native:canvas :width="200" :height="200">
    <native:rect :width="100" :height="100" bg="#3B82F6" :border-radius="8" />
    <native:circle :width="50" :height="50" bg="#EF4444" />
</native:canvas>

Props#

All shared layout and style attributes are supported. There are no canvas-specific props.

Children#

Accepts any EDGE elements as children. Typically used with shape primitives (<native:rect>, <native:circle>, <native:line>).

For overlay-style layering of shapes use a <native:stack> instead — <native:canvas> arranges children along the column main axis, which is rarely what you want for free-form drawing.

Element#

Copied!

use Native\Mobile\Edge\Elements\Canvas;
use Native\Mobile\Edge\Elements\Rect;
 
Canvas::make(
    Rect::make()->width(100)->height(100)->bg('#3B82F6'),
);

use Native\Mobile\Edge\Elements\Canvas;
use Native\Mobile\Edge\Elements\Rect;

Canvas::make(
    Rect::make()->width(100)->height(100)->bg('#3B82F6'),
);

make(Element ...$children) - Create a canvas with children