Circles & Ellipses

Draw circles and ovals

React Native Skia provides components for drawing circles and ovals.

Circle

Draws a circle.

Name	Type	Description
cx	number	Center X coordinate
cy	number	Center Y coordinate
r	number	Radius

import { Canvas, Circle } from "@shopify/react-native-skia";

const CircleDemo = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={r} cy={r} r={r} color="lightblue" />
    </Canvas>
  );
};

Oval

Draws an oval based on its bounding rectangle.

Name	Type	Description
x	number	X coordinate of the bounding rectangle
y	number	Y coordinate of the bounding rectangle
width	number	Width of the bounding rectangle
height	number	Height of the bounding rectangle

import { Canvas, Oval } from "@shopify/react-native-skia";

const OvalDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Oval x={64} y={0} width={128} height={256} color="lightblue" />
    </Canvas>
  );
};

Paint Properties

All shape components support paint properties. Here’s an example with stroke:

import { Canvas, Circle } from "@shopify/react-native-skia";

const StrokedCircle = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle
        cx={128}
        cy={128}
        r={100}
        color="blue"
        style="stroke"
        strokeWidth={8}
      />
    </Canvas>
  );
};

Examples

Concentric Circles

import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const ConcentricCircles = () => {
  const center = 128;
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Group>
        <Circle cx={center} cy={center} r={100} color="#E8F4F8" />
        <Circle cx={center} cy={center} r={75} color="#B8E1F0" />
        <Circle cx={center} cy={center} r={50} color="#88CEE8" />
        <Circle cx={center} cy={center} r={25} color="#51AFED" />
      </Group>
    </Canvas>
  );
};

Blend Modes

import { Canvas, Circle, Group } from "@shopify/react-native-skia";

const BlendModeCircles = () => {
  const r = 64;
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Group blendMode="multiply">
        <Circle cx={r} cy={r} r={r} color="cyan" />
        <Circle cx={128} cy={r} r={r} color="magenta" />
        <Circle cx={64} cy={128} r={r} color="yellow" />
      </Group>
    </Canvas>
  );
};

Related

• Rectangles - Draw rectangles
• Paths - Draw complex shapes
• Paint Properties - Styling options