src/App.vue

@@ -4,12 +4,13 @@ import Page from './components/Page.vue';
 import Input from './components/Input.vue';
 import Canvas from './components/Canvas.vue';
 import { ref } from 'vue';
-import { DEFAULT_HORIZONTAL_MARGIN, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, DEFAULT_VERTICAL_MARGIN } from './const';
+import { DEFAULT_HORIZONTAL_MARGIN, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, DEFAULT_VERTICAL_MARGIN, DEFAULT_IMAGE_BACKGROUND_COLOR } from './const';
 
 const vMargin = ref(DEFAULT_VERTICAL_MARGIN)
 const hMargin = ref(DEFAULT_HORIZONTAL_MARGIN)
 const imageWidth = ref(DEFAULT_IMAGE_WIDTH)
 const imageHeight = ref(DEFAULT_IMAGE_HEIGHT)
+const imageBackgroundColor = ref(DEFAULT_IMAGE_BACKGROUND_COLOR)
 
 const savePng = async () => {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
@@ -27,6 +28,16 @@ const savePng = async () => {
 <template>
   <div class="container">
     <Sidebar>
+      <div class="l-sidebar-block">
+        <h1>Фон</h1>
+        <div class="input">
+          <label class="l-label">
+            Цвет {{ imageBackgroundColor }}
+          </label>
+          <br>
+          <input class="l-input" type="color" v-model="imageBackgroundColor">
+        </div>
+      </div>
       <div class="l-sidebar-block">
         <h1>Линии</h1>
         <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
@@ -36,11 +47,18 @@ const savePng = async () => {
         <h1>Изображение</h1>
         <Input v-model="imageHeight">Высота, мм</Input>
         <Input v-model="imageWidth">Ширина, мм</Input>
-        <button class="l-button" @click="savePng">Сохранить как png</button>
+        <div class="l-mini-buttons-bar">
+          <button class="l-base-button l-mini-button" @click="imageWidth = 148; imageHeight = 210">A5</button>
+          <button class="l-base-button l-mini-button" @click="imageWidth = 210; imageHeight = 297">A4</button>
+          <button class="l-base-button l-mini-button"
+            @click="var tmp; tmp = imageHeight; imageHeight = imageWidth; imageWidth = tmp">Повернуть</button>
+        </div>
+        <button class="l-base-button l-button" @click="savePng">Сохранить как png</button>
       </div>
     </Sidebar>
     <Page>
-      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight" />
+      <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight"
+        :imageBackgroundColor="imageBackgroundColor" />
     </Page>
   </div>
 </template>
@@ -66,15 +84,29 @@ body {
   background-color: aqua;
 }
 
-.l-button {
+.l-base-button {
   color: #22333B;
   background-color: #EAE0D5;
   border: 1px solid #5E503F;
+}
+
+.l-base-button:hover {
+  background-color: #d7c7b6;
+}
+
+.l-button {
   border-radius: 10px;
   margin: 5px;
   padding: 10px;
 }
 
+.l-mini-button {
+  border-radius: 3px;
+  margin: 3px;
+  padding: 2px 10px;
+  font-size: 10pt;
+}
+
 @font-face {
   font-family: 'MPLUS1p';
   font-style: normal;
@@ -92,4 +124,16 @@ h1 {
   padding: 20px;
   background-color: white;
 }
+
+.l-mini-buttons-bar {
+  padding: 0 0 20px 5px;
+}
+
+.input {
+  margin: 10px;
+}
+
+.l-input {
+  margin: 10px 0;
+}
 </style>

src/components/Canvas.vue

@@ -7,15 +7,18 @@ const props = defineProps<{
   hMargin: number;
   imageWidth: number;
   imageHeight: number;
+  imageBackgroundColor: string;
 }>();
 
 const ctx = ref<null | CanvasRenderingContext2D>(null);
 
 const clearCanvas = () => {
-  const { imageWidth, imageHeight } = props;
+  const { imageWidth, imageHeight, imageBackgroundColor } = props;
 
   if (ctx.value) {
-    ctx.value.clearRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
+    ctx.value.shadowColor
+    ctx.value.fillStyle = imageBackgroundColor;
+    ctx.value.fillRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
     ctx.value.beginPath();
   }
 };
@@ -58,11 +61,7 @@ onUpdated(() => {
 </script>
 
 <template>
-  <canvas
-    id="canvas"
-    :width="imageWidth * ONE_MM"
-    :height="imageHeight * ONE_MM"
-  />
+  <canvas id="canvas" :width="imageWidth * ONE_MM" :height="imageHeight * ONE_MM" />
 </template>
 
 <style scoped>

src/components/Input.vue

@@ -15,7 +15,6 @@ const modelValue = defineModel();
 <style scoped>
 .input {
     margin: 10px;
-
 }
 
 input {

src/components/Sidebar.vue

@@ -10,9 +10,15 @@
     top: 0;
     left: 0;
 
-    margin: 10px;
     padding: 10px;
 
     z-index: 2;
+
+    height: 100vh;
+    overflow: auto;
+}
+
+.sidebar::-webkit-scrollbar{
+    display: none;
   }
 </style>

src/const.ts

@@ -6,3 +6,5 @@ export const DEFAULT_IMAGE_HEIGHT = 100;
 
 export const DEFAULT_VERTICAL_MARGIN = 10;
 export const DEFAULT_HORIZONTAL_MARGIN = 10;
+
+export const DEFAULT_IMAGE_BACKGROUND_COLOR = "#ffffff"