diff --git a/lib/canvas/drawing_canvas.dart b/lib/canvas/drawing_page.dart
similarity index 85%
rename from lib/canvas/drawing_canvas.dart
rename to lib/canvas/drawing_page.dart
index f599d6e..811f20a 100644
--- a/lib/canvas/drawing_canvas.dart
+++ b/lib/canvas/drawing_page.dart
@@ -7,17 +7,20 @@ import 'package:notes/canvas/my_painter.dart';
 
 import 'document_types.dart';
 
-class DrawingCanvas extends StatefulWidget {
-  const DrawingCanvas({Key? key}) : super(key: key);
+class DrawingPage extends StatefulWidget {
+  const DrawingPage({Key? key}) : super(key: key);
 
   @override
-  State<DrawingCanvas> createState() => _DrawingCanvasState();
+  State<DrawingPage> createState() => _DrawingPageState();
 }
 
-class _DrawingCanvasState extends State<DrawingCanvas> {
+class _DrawingPageState extends State<DrawingPage> {
   List<Stroke> _strokes = [];
   bool allowDrawWithFinger = false;
 
+  double zoom = 0.6;
+  Offset scrollPos = const Offset(.0, .0);
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -31,6 +34,8 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
   }
 
   double _calcAngleDependentWidth(List<Point> pts, double basetickness){
+    return basetickness;
+
     // todo do correct linear interpolation and extimate angle
     final lininterpol = PolynomialInterpolation(nodes: pts.map((e) => InterpolationNode(x: e.point.dx, y: e.point.dy)).toList(growable: false));
     lininterpol.compute(1.0);
@@ -45,6 +50,10 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
   }
 
   Widget _buildCanvas() {
+    final width = MediaQuery.of(context).size.width;
+
+    final zoomedwidth = width * zoom;
+
     return Scaffold(
       body: Listener(
         onPointerMove: (event) {
@@ -75,6 +84,7 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
             });
           }
         },
+
         onPointerUp: (event) {
           if (allowDrawWithFinger || event.kind != PointerDeviceKind.touch) {
             if (_strokes.last.points.length <= 1) {
@@ -118,10 +128,15 @@ class _DrawingCanvasState extends State<DrawingCanvas> {
         //     _strokes = List.from(_strokes)..add(Stroke.fromPoints([details.localPosition]));
         //   });
         // },
-        child: CustomPaint(
-          painter: MyPainter(strokes: _strokes),
-          size: Size.infinite,
-          // ),
+        child: SingleChildScrollView(
+          child: Center(
+            child: CustomPaint(
+              painter: MyPainter(strokes: _strokes),
+              // todo not working
+              size: Size(zoomedwidth, zoomedwidth * sqrt2), // todo add different paper dimensions
+              // ),
+            ),
+          ),
         ),
       ),
     );
diff --git a/lib/canvas/my_painter.dart b/lib/canvas/my_painter.dart
index 635d3df..62c29ec 100644
--- a/lib/canvas/my_painter.dart
+++ b/lib/canvas/my_painter.dart
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 
 import 'document_types.dart';
@@ -16,6 +14,8 @@ class MyPainter extends CustomPainter {
       ..strokeCap = StrokeCap.square;
       // ..strokeWidth = 3.0;
 
+    canvas.drawColor(Color.fromRGBO(255, 255, 255, .1), BlendMode.src);
+
     for(final stroke in strokes){
       for(int i = 0; i < stroke.points.length -1; i++){
         final pt1 = stroke.points[i].point;
diff --git a/lib/main.dart b/lib/main.dart
index dc4583c..5f232f8 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:notes/CollapseDrawer.dart';
 import 'package:notes/all_notes_page.dart';
-import 'package:notes/canvas/drawing_canvas.dart';
+import 'package:notes/canvas/drawing_page.dart';
 
 void main() {
   runApp(const MyApp());
@@ -66,7 +66,7 @@ class _MyHomePageState extends State<MyHomePage> {
             Navigator.push(
               context,
               MaterialPageRoute(
-                builder: (context) => const DrawingCanvas(),
+                builder: (context) => const DrawingPage(),
               ),
             );
           },