diff --git a/package.json b/package.json
index 4802c6c..688457d 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Web application for distribution of free classrooms",
   "scripts": {
     "dev": "vite",
+    "start": "vite",
     "build": "vite build"
   },
   "author": "dm1sh",
diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
new file mode 100644
index 0000000..df192f7
--- /dev/null
+++ b/src/components/Canvas.tsx
@@ -0,0 +1,28 @@
+import { HTMLProps, useEffect, useRef } from "react";
+
+export type DrawFT = (ctx: CanvasRenderingContext2D) => void;
+
+export type CanvasProps = HTMLProps<HTMLCanvasElement> & { draw: DrawFT };
+
+export const useCanvas = (draw: DrawFT) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) throw new Error("Canvas ref not set");
+
+    const context = canvas.getContext("2d");
+
+    if (!context) throw new Error("Couldn't get canvas context");
+
+    draw(context);
+  }, [draw]);
+
+  return canvasRef;
+};
+
+export const Canvas = ({ draw, ...props }: CanvasProps) => {
+  const canvasRef = useCanvas(draw);
+
+  return <canvas ref={canvasRef} {...props} />;
+};