diff --git a/package.json b/package.json
index 42daf251..2c82e3ef 100644
--- a/package.json
+++ b/package.json
@@ -50,11 +50,11 @@
     "codemirror": "^5.65.7",
     "codemirror-textmate": "^1.1.0",
     "date-fns": "^2.28.0",
+    "dom-to-image": "^2.6.0",
     "electron-store": "^8.0.1",
     "floating-vue": "^2.0.0-beta.17",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
-    "html2canvas": "^1.4.1",
     "i18next": "^21.8.14",
     "i18next-fs-backend": "^1.1.4",
     "interactjs": "^1.10.11",
@@ -83,6 +83,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@tsconfig/node14": "^1.0.1",
     "@types/codemirror": "^5.60.5",
+    "@types/dom-to-image": "^2.6.4",
     "@types/estree": "^0.0.51",
     "@types/i18next-fs-backend": "^1.1.2",
     "@types/lowdb": "^1.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3600af11..d9cda0be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,7 @@ specifiers:
   '@sipec/vue3-tags-input': ^3.0.4
   '@tsconfig/node14': ^1.0.1
   '@types/codemirror': ^5.60.5
+  '@types/dom-to-image': ^2.6.4
   '@types/estree': ^0.0.51
   '@types/i18next-fs-backend': ^1.1.2
   '@types/lowdb': ^1.0.11
@@ -36,6 +37,7 @@ specifiers:
   codemirror-textmate: ^1.1.0
   copyfiles: ^2.4.1
   date-fns: ^2.28.0
+  dom-to-image: ^2.6.0
   dotenv: ^16.0.1
   electron: ^16.2.3
   electron-builder: ^23.1.0
@@ -52,7 +54,6 @@ specifiers:
   fs-extra: ^10.0.1
   handlebars: ^4.7.7
   highlight.js: ^11.5.1
-  html2canvas: ^1.4.1
   husky: ^7.0.0
   i18next: ^21.8.14
   i18next-fs-backend: ^1.1.4
@@ -100,11 +101,11 @@ dependencies:
   codemirror: 5.65.7
   codemirror-textmate: 1.1.0_codemirror@5.65.7+onigasm@2.2.5
   date-fns: 2.28.0
+  dom-to-image: 2.6.0
   electron-store: 8.0.1
   floating-vue: 2.0.0-beta.17_vue@3.2.33
   fs-extra: 10.0.1
   highlight.js: 11.5.1
-  html2canvas: 1.4.1
   i18next: 21.8.14
   i18next-fs-backend: 1.1.4
   interactjs: 1.10.11
@@ -133,6 +134,7 @@ devDependencies:
   '@commitlint/config-conventional': 15.0.0
   '@tsconfig/node14': 1.0.1
   '@types/codemirror': 5.60.5
+  '@types/dom-to-image': 2.6.4
   '@types/estree': 0.0.51
   '@types/i18next-fs-backend': 1.1.2
   '@types/lowdb': 1.0.11
@@ -2111,6 +2113,10 @@ packages:
       '@types/ms': 0.7.31
     dev: true
 
+  /@types/dom-to-image/2.6.4:
+    resolution: {integrity: sha512-UddUdGF1qulrSDulkz3K2Ypq527MR6ixlgAzqLbxSiQ0icx0XDlIV+h4+edmjq/1dqn0KgN0xGSe1kI9t+vGuw==}
+    dev: true
+
   /@types/ejs/2.7.0:
     resolution: {integrity: sha512-kM2g9Fdk/du24fKuuQhA/LBleFR4Z4JP2MVKpLxQQSzofF1uJ06D+c05zfLDAkkDO55aEeNwJih0gHrE/Ci20A==}
     dev: true
@@ -3682,11 +3688,6 @@ packages:
       pascalcase: 0.1.1
     dev: true
 
-  /base64-arraybuffer/1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-    dev: false
-
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -4724,12 +4725,6 @@ packages:
       timsort: 0.3.0
     dev: false
 
-  /css-line-break/2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /css-select-base-adapter/0.1.1:
     resolution: {integrity: sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==}
     dev: false
@@ -5722,6 +5717,10 @@ packages:
       domhandler: 4.3.0
       entities: 2.2.0
 
+  /dom-to-image/2.6.0:
+    resolution: {integrity: sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==}
+    dev: false
+
   /domelementtype/1.3.1:
     resolution: {integrity: sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==}
     dev: false
@@ -7869,14 +7868,6 @@ packages:
     resolution: {integrity: sha1-wc56MWjIxmFAM6S194d/OyJfnDg=}
     dev: false
 
-  /html2canvas/1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      css-line-break: 2.1.0
-      text-segmentation: 1.0.3
-    dev: false
-
   /htmlparser2/6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
     dependencies:
@@ -12114,12 +12105,6 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
-  /text-segmentation/1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /text-table/0.2.0:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
@@ -12759,12 +12744,6 @@ packages:
     resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
     engines: {node: '>= 0.4.0'}
 
-  /utrie/1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
-    dependencies:
-      base64-arraybuffer: 1.0.2
-    dev: false
-
   /uuid/3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
     deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
diff --git a/src/renderer/components/screenshot/TheScreenshot.vue b/src/renderer/components/screenshot/TheScreenshot.vue
index ef20804e..44ba1351 100644
--- a/src/renderer/components/screenshot/TheScreenshot.vue
+++ b/src/renderer/components/screenshot/TheScreenshot.vue
@@ -94,23 +94,19 @@
         </div>
       </div>
     </PerfectScrollbar>
-    <div
-      ref="previewRef"
-      class="preview"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useAppStore } from '@/store/app'
 import hljs from 'highlight.js'
-import html2canvas from 'html2canvas'
 import interact from 'interactjs'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useHljsTheme } from '@/composable'
 import { store, track, i18n } from '@/electron'
 import { useSnippetStore } from '@/store/snippets'
 import { useMagicKeys } from '@vueuse/core'
+import domToImage from 'dom-to-image'
 
 const GUTTER_RIGHT_OFFSET = 10
 const GUTTER_WIDTH = 8
@@ -131,7 +127,6 @@ const { escape } = useMagicKeys()
 
 const frameRef = ref<HTMLElement>()
 const snippetRef = ref<HTMLElement>()
-const previewRef = ref<HTMLElement>()
 const gutterRef = ref<HTMLElement>()
 
 const gutterWidth = ref(GUTTER_WIDTH + 'px')
@@ -180,17 +175,13 @@ const init = () => {
 }
 
 const onSaveScreenshot = async () => {
-  const canvas = await html2canvas(snippetRef.value!, {
-    backgroundColor: null
-  })
-  previewRef.value?.appendChild(canvas)
+  const data = await domToImage.toPng(snippetRef.value!)
 
   const a = document.createElement('a')
-  const img = canvas.toDataURL('image/png')
-
-  a.href = img
+  a.href = data
   a.download = `${props.name}.png`
   a.click()
+
   track('snippets/create-screenshot')
 }