Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

CanvasStage

CanvasStage is the editor's canvas while an item on it is selected: the frame, the item at its size and place, and a box with eight handles to move and resize it.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

CanvasStage is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

CanvasStage is made for the web, and isn’t part of Sakuga for Android yet.

Not for
  • The picture while nothing is selectedMonitor
  • A page's frames and selection in mangaMangaPage

Guidelines

  • box is the item's place and size in percent of the frame; past the frame's edges it shows dimmed.
  • image and imageStyle draw the item; ratio is the frame's (default 16 / 9); height the stage's.
  • onBox(box) makes the box movable: it is called with each new box.
  • With onBox, the box can be dragged to move it, and each handle resizes it from its own edge or corner (never below 1%); onBox gets each new box as it moves, and the new position is said when the drag ends.
CanvasStageExample.jsxReact
import { CanvasStage } from '@anicanon/sakuga/anicanonkit';

export default function CanvasStageExample() {
  return (
    <CanvasStage
      image="/art/eba-cinema.webp"
      box={{ x: 20, y: 15, w: 50, h: 60 }}
      height={200}
      label="Bruce"
      onBox={() => {}}
    />
  );
}

PropsCanvasStageProps

image
string
imageStyle
string
alt
string
box
Box
ratio
string
height
number
label
string
children
ReactNode
className
string
onBox
(box: Box) => void
Makes the box one Tab stop: arrows move it a percent, Shift and an arrow resize it. Called with the new box.

Types

type Box = {
    x: number;
    y: number;
    w: number;
    h: number;
};
CanvasStageExample.swiftiOS · coming soon
CanvasStageExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

stage-radius
radius-lg
16px
stage-gap
gap-lg
12px
stage-padding
inset-lg
16px
stage-edge-width
line-hairline
1px
stage-mask-inset-ring-width
line-hairline
1px
stage-sel-outline-width
line-strong
2px
stage-h-size
its own value
8px
stage-h-radius
radius-xs
4px
stage-h-ring-width
line-strong
2px
stage-forced-handle-ring-width
line-strong
2px

Motion

stage-sel-sel-in-animation
motion-select
sk-sel-in 100ms cubic-bezier(0, 0, 0, 1)

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
The selection is a group named by label (default "Selected item") and described by its position and size. With onBox it is an application (a "movable item"), so a screen reader in browse mode hands it the arrows, and one Tab stop: arrows move it a percent and Shift with an arrow resizes it from its right or bottom edge, each change said aloud. The handles are for the pointer, dragged to resize, and are hidden; dragging the box moves it as the arrows do.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.