diff --git a/bundles/org.openhab.ui/doc/components/index.md b/bundles/org.openhab.ui/doc/components/index.md
index 97ea803cac..418a367e07 100644
--- a/bundles/org.openhab.ui/doc/components/index.md
+++ b/bundles/org.openhab.ui/doc/components/index.md
@@ -87,6 +87,8 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
 | Component | Name | Description |
 |--------|------|-------------|
 | [`oh-block`](./oh-block.html) |  [Layout Grid Block](./oh-block.html) | A block in a grid layout |
+| [`oh-canvas-item`](./oh-canvas-item.html) |  [Canvas Item](./oh-canvas-item.html) | Specific attributes to display widgets on a canvas. |
+| [`oh-canvas-layout`](./oh-canvas-layout.html) |  [Canvas Layout](./oh-canvas-layout.html) | Position widgets on a canvas layout with arbitrary position and size down to pixel resolution |
 | [`oh-grid-col`](./oh-grid-col.html) |  [Layout Grid Column](./oh-grid-col.html) | A column in a grid layout |
 | [`oh-grid-layout`](./oh-grid-layout.html) |  [Fixed Grid Layout](./oh-grid-layout.html) | Arranges widgets on a grid of squares with user-defined sizes |
 | [`oh-grid-row`](./oh-grid-row.html) |  [Layout Grid Row](./oh-grid-row.html) | A row in a grid layout |
diff --git a/bundles/org.openhab.ui/doc/components/oh-canvas-item.md b/bundles/org.openhab.ui/doc/components/oh-canvas-item.md
new file mode 100644
index 0000000000..29595330c2
--- /dev/null
+++ b/bundles/org.openhab.ui/doc/components/oh-canvas-item.md
@@ -0,0 +1,96 @@
+---
+title: oh-canvas-item - Canvas Item
+component: oh-canvas-item
+label: Canvas Item
+description: Specific attributes to display widgets on a canvas.
+source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-canvas-item.md
+prev: /docs/ui/components/
+---
+
+# oh-canvas-item - Canvas Item
+
+<!-- Put a screenshot here if relevant:
+![](./images/oh-canvas-item/header.jpg)
+-->
+
+[[toc]]
+
+<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
+<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
+<!-- GENERATED componentDescription -->
+Specific attributes to display widgets on a canvas.
+<!-- GENERATED /componentDescription -->
+
+## Configuration
+
+<!-- DO NOT REMOVE the following comments -->
+<!-- GENERATED props -->
+### Layout Settings
+<div class="props">
+<PropGroup name="appearance" label="Layout Settings">
+<PropBlock type="BOOLEAN" name="notStyled" label="Preserve classic style">
+  <PropDescription>
+    Preserve classic appearance of widgets as in standard layout pages.
+  </PropDescription>
+</PropBlock>
+<PropBlock type="BOOLEAN" name="noCanvasShadow" label="No elements shadow">
+  <PropDescription>
+    Do not shadow inner elements of standard widgets
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+
+<!-- GENERATED /props -->
+
+<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
+### Inherited Properties
+
+-->
+
+<!-- If applicable describe the slots recognized by the component and what they represent:
+### Slots
+
+#### `default`
+
+The contents of the oh-canvas-item.
+
+-->
+
+<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
+## Examples
+
+### Example 1
+
+![](./images/oh-canvas-item/example1.jpg)
+
+```yaml
+component: oh-canvas-item
+config:
+  prop1: value1
+  prop2: value2
+```
+
+### Example 2
+
+![](./images/oh-canvas-item/example2.jpg)
+
+::: details YAML
+```yaml
+component: oh-canvas-item
+config:
+  prop1: value1
+  prop2: value2
+slots
+```
+:::
+
+-->
+
+<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
+## Community Resources
+
+- [Community Post 1](https://community.openhab.org/t/12345)
+- [Community Post 2](https://community.openhab.org/t/23456)
+-->
diff --git a/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md b/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md
new file mode 100644
index 0000000000..4b78d9b295
--- /dev/null
+++ b/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md
@@ -0,0 +1,143 @@
+---
+title: oh-canvas-layout - Canvas Layout
+component: oh-canvas-layout
+label: Canvas Layout
+description: Position widgets on a canvas layout with arbitrary position and size down to pixel resolution
+source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.ui/doc/components/oh-canvas-layout.md
+prev: /docs/ui/components/
+---
+
+# oh-canvas-layout - Canvas Layout
+
+<!-- Put a screenshot here if relevant:
+![](./images/oh-canvas-layout/header.jpg)
+-->
+
+[[toc]]
+
+<!-- Note: you can overwrite the definition-provided description and add your own intro/additional sections instead -->
+<!-- DO NOT REMOVE the following comments if you intend to keep the definition-provided description -->
+<!-- GENERATED componentDescription -->
+Position widgets on a canvas layout with arbitrary position and size down to pixel resolution
+<!-- GENERATED /componentDescription -->
+
+## Configuration
+
+<!-- DO NOT REMOVE the following comments -->
+<!-- GENERATED props -->
+### Layout Settings
+<div class="props">
+<PropGroup name="layout" label="Layout Settings">
+<PropBlock type="INTEGER" name="grid" label="Grid size">
+  <PropDescription>
+    Grid size in pixels used to snap content (default 20)
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+### Screen Settings
+<div class="props">
+<PropGroup name="screenSettings" label="Screen Settings">
+<PropBlock type="INTEGER" name="screenWidth" label="Screen Width">
+  <PropDescription>
+    Screen width in pixels (default 1280)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="INTEGER" name="screenHeight" label="Screen Height">
+  <PropDescription>
+    Screen width in pixels (default 720)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="BOOLEAN" name="scale" label="Scaling">
+  <PropDescription>
+    Scale content to screen width (can lead to unexpected styling issues) (default false)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="imageUrl" label="Image URL" context="url">
+  <PropDescription>
+    The URL of the image to display as background
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="imageSrcSet" label="Image Source Set">
+  <PropDescription>
+    The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/floor-0@2x.jpg 2x"
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+### Canvas items shadow
+<div class="props">
+<PropGroup name="shadow" label="Canvas items shadow">
+<PropBlock type="TEXT" name="boxShadow" label="Box shadow">
+  <PropDescription>
+    Shadow applied to box elements (box-shadow CSS syntax).
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="textShadow" label="Text shadow">
+  <PropDescription>
+    Shadow applied to text elements or font icons (text-shadow CSS syntax)
+  </PropDescription>
+</PropBlock>
+<PropBlock type="TEXT" name="filterShadow" label="Fitler Shadow">
+  <PropDescription>
+    Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)
+  </PropDescription>
+</PropBlock>
+</PropGroup>
+</div>
+
+
+<!-- GENERATED /props -->
+
+<!-- If applicable describe how properties are forwarded to a underlying component from Framework7, ECharts, etc.:
+### Inherited Properties
+
+-->
+
+<!-- If applicable describe the slots recognized by the component and what they represent:
+### Slots
+
+#### `default`
+
+The contents of the oh-canvas-layout.
+
+-->
+
+<!-- Add as many examples as desired - put the YAML in a details container when it becomes too long (~150/200+ lines):
+## Examples
+
+### Example 1
+
+![](./images/oh-canvas-layout/example1.jpg)
+
+```yaml
+component: oh-canvas-layout
+config:
+  prop1: value1
+  prop2: value2
+```
+
+### Example 2
+
+![](./images/oh-canvas-layout/example2.jpg)
+
+::: details YAML
+```yaml
+component: oh-canvas-layout
+config:
+  prop1: value1
+  prop2: value2
+slots
+```
+:::
+
+-->
+
+<!-- Try to clean up URLs to the forum (https://community.openhab.org/t/<threadID>[/<postID>] should suffice)
+## Community Resources
+
+- [Community Post 1](https://community.openhab.org/t/12345)
+- [Community Post 2](https://community.openhab.org/t/23456)
+-->
diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
index 25dbecd5d3..2bd784a00e 100644
--- a/bundles/org.openhab.ui/web/package-lock.json
+++ b/bundles/org.openhab.ui/web/package-lock.json
@@ -36,6 +36,7 @@
         "vue": "^2.6.12",
         "vue-async-computed": "^3.9.0",
         "vue-codemirror": "^4.0.6",
+        "vue-draggable-resizable": "^2.3.0",
         "vue-echarts": "^4.1.0",
         "vue-fragment": "^1.5.1",
         "vue-fullscreen": "^2.2.0",
@@ -21404,6 +21405,15 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/vue-draggable-resizable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
+      "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA==",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-echarts": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-4.1.0.tgz",
@@ -41382,6 +41392,11 @@
         "diff-match-patch": "^1.0.0"
       }
     },
+    "vue-draggable-resizable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
+      "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA=="
+    },
     "vue-echarts": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-4.1.0.tgz",
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
index cbff3656a8..93e4b20fd4 100644
--- a/bundles/org.openhab.ui/web/package.json
+++ b/bundles/org.openhab.ui/web/package.json
@@ -88,6 +88,7 @@
     "vue": "^2.6.12",
     "vue-async-computed": "^3.9.0",
     "vue-codemirror": "^4.0.6",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-echarts": "^4.1.0",
     "vue-fragment": "^1.5.1",
     "vue-fullscreen": "^2.2.0",
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
index 992c16d3d0..aab1d82e11 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
@@ -67,3 +67,31 @@ export function OhGridLayoutDefinition () {
       pb('showFullscreenIcon', 'Show Fullscreen Icon', 'Show a fullscreen icon on the top right corner (default false)')
     ])
 }
+
+export function OhCanvasItemDefinition () {
+  return new WidgetDefinition('oh-canvas-item', 'Canvas Item', 'Specific attributes to display widgets on a canvas.')
+    .paramGroup(pg('appearance', 'Layout Settings'), [
+      pb('notStyled', 'Preserve classic style', 'Preserve classic appearance of widgets as in standard layout pages.'),
+      pb('noCanvasShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
+        .v((value, configuration, configDescription, parameters) => { return configuration.notStyled !== true })
+    ])
+}
+
+export function OhCanvasLayoutDefinition () {
+  return new WidgetDefinition('oh-canvas-layout', 'Canvas Layout', 'Position widgets on a canvas layout with arbitrary position and size down to pixel resolution')
+    .paramGroup(pg('layout', 'Layout Settings'), [
+      pn('grid', 'Grid size', 'Grid size in pixels used to snap content (default 20)')
+    ])
+    .paramGroup(pg('screenSettings', 'Screen Settings'), [
+      pn('screenWidth', 'Screen Width', 'Screen width in pixels (default 1280)'),
+      pn('screenHeight', 'Screen Height', 'Screen width in pixels (default 720)'),
+      pb('scale', 'Scaling', 'Scale content to screen width (can lead to unexpected styling issues) (default false)'),
+      pt('imageUrl', 'Image URL', 'The URL of the image to display as background').c('url'),
+      pt('imageSrcSet', 'Image Source Set', 'The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/floor-0@2x.jpg 2x"')
+    ])
+    .paramGroup(pg('shadow', 'Canvas items shadow'), [
+      pt('boxShadow', 'Box shadow', 'Shadow applied to box elements (box-shadow CSS syntax).').a(),
+      pt('textShadow', 'Text shadow', 'Shadow applied to text elements or font icons (text-shadow CSS syntax)').a(),
+      pt('filterShadow', 'Fitler Shadow', 'Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)').a()
+    ])
+}
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
index 2bb41c8df0..36579a55f9 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
@@ -6,3 +6,5 @@ export { default as OhGridCol } from './oh-grid-col.vue'
 export { default as OhGridCells } from './oh-grid-cells.vue'
 export { default as OhMasonry } from './oh-masonry.vue'
 export { default as OhGridLayout } from './oh-grid-layout.vue'
+export { default as OhCanvasLayout } from './oh-canvas-layout.vue'
+export { default as OhCanvasItem } from './oh-canvas-item.vue'
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
new file mode 100644
index 0000000000..133b2e5bf0
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-item.vue
@@ -0,0 +1,237 @@
+<template>
+  <vue-draggable-resizable
+    :id="'oh-canvas-item-vdr-' +id"
+    :key="reloadKey"
+    :x="x"
+    :y="y"
+    :w="w"
+    :h="h"
+    :parent="true"
+    :draggable="!!context.editmode"
+    :resizable="!!context.editmode && !autosize"
+    :class-name="!!context.editmode ? 'oh-canvas-item-editmode' : 'oh-canvas-item-runmode'"
+    :grid="gridEnable ? [gridPitch,gridPitch] : undefined"
+    :min-height="gridEnable ? gridPitch : undefined"
+    :min-width="gridEnable ? gridPitch : undefined"
+    v-if="visible" class="oh-canvas-item no-margin"
+    @dragging="onDrag"
+    @resizing="onResize"
+    :on-drag-start="onDragStartCallback"
+    :on-resize-start="onResizeStartCallback">
+    <f7-menu v-if="context.editmode" class="configure-canvas-menu">
+      <f7-menu-item icon-f7="menu" dropdown icon-only>
+        <f7-menu-dropdown right>
+          <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component, context.parent)" href="#" text="Configure container" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="context.editmode.configureWidget(context.component.slots.default[0], context)" href="#" text="Configure Widget" />
+          <f7-menu-dropdown-item @click="context.editmode.editWidgetCode(context.component, context.parent)" href="#" text="Edit YAML" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleAutoSize()" href="#">
+            <span>Auto Size</span>
+            <f7-icon class="margin-left" :f7="autosize ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleShadow()" href="#">
+            <span>Shadow</span>
+            <f7-icon class="margin-left" :f7="shadow ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" divider />
+          <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component, context.parent)" href="#" text="Copy" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent, 'canvas')" href="#" text="Bring to Front" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent, 'canvas')" href="#" text="Move Up" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent, 'canvas')" href="#" text="Move Down" />
+          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent, 'canvas')" href="#" text="Send to Back" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'canvas')" href="#" text="Remove Item" />
+        </f7-menu-dropdown>
+      </f7-menu-item>
+    </f7-menu>
+    <div @click.capture="eventControl" style="width: 100%; height: 100%; position:absolute;">
+      <oh-placeholder-widget v-if="context.editmode && !context.component.slots.default.length" @click="context.editmode.addWidget(context.component, null, context.parent)" class="oh-canvas-item-content" />
+      <generic-widget-component v-else-if="context.component.slots.default.length" :context="childContext(context.component.slots.default[0])" @command="onCommand" class="oh-canvas-item-content"
+                                :class="{
+                                  'oh-canvas-item-styled' : styled,
+                                  'oh-canvas-item-shadow' : styled && shadow
+                                }" />
+    </div>
+    <f7-icon v-if="context.editmode" class="drag-handle" f7="move" size="15" color="gray" />
+  </vue-draggable-resizable>
+</template>
+
+<style lang="stylus">
+  .oh-canvas-item-editmode
+    outline 1px dashed #F00
+
+  .oh-canvas-item
+    position absolute
+
+    .oh-canvas-item-content
+      width 100%
+      height 100%
+      margin 0
+
+    .oh-canvas-item-styled        // override background obscuring styles from system widgets
+      &.card                    // apply to card items
+        box-shadow none
+        background none
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            background var(--f7-card-bg-color)
+
+    .oh-canvas-item-shadow        // shadow tuned to various card widgets
+      &.card                    // apply to card items
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            box-shadow  var(--oh-canvas-item-box-shadow)
+          .oh-slider
+            .range-bar, .range-knob, .range-knob-label
+              box-shadow  var(--oh-canvas-item-box-shadow)
+          img, svg
+            filter var(--oh-canvas-item-svg-shadow)
+        .label-card-content
+          text-shadow var(--oh-canvas-item-text-shadow)
+
+    .placeholder-widget a
+      height 100%
+      padding 0
+      display flex
+
+    .drag-handle                // show drag handle on upper left corner
+      position absolute !important
+      top 0px
+      left 0px
+      padding 2px
+      z-index 1000
+
+    .configure-canvas-menu        // show menu icon on upper right corner
+      position absolute
+      top 2px
+      right 2px
+      .menu-inner
+        padding 0px
+      .menu-inner:after
+        width 0px
+</style>
+
+<script>
+import mixin from '../widget-mixin'
+import OhPlaceholderWidget from './oh-placeholder-widget.vue'
+import { OhCanvasItemDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhCanvasItemDefinition,
+  components: {
+    'vue-draggable-resizable': () => Promise.all([
+      import(/* webpackChunkName: "canvas-layout" */ 'vue-draggable-resizable/dist/VueDraggableResizable.css'),
+      import(/* webpackChunkName: "canvas-layout" */ 'vue-draggable-resizable')
+    ]).then((component) => {
+      return component[1].default
+    }),
+    OhPlaceholderWidget
+  },
+  props: {
+    gridPitch: Number,
+    gridEnable: Boolean,
+    id: String
+  },
+  data () {
+    return {
+      x: 0,
+      y: 0,
+      w: 0,
+      h: 0,
+      reloadKey: 0,
+      shadow: true,
+      styled: true
+    }
+  },
+  created () {
+    this.x = this.config.x || 20
+    this.y = this.config.y || 20
+    this.w = this.config.w || 100
+    this.h = this.config.h || 100
+    this.shadow = !this.config.noCanvasShadow
+    this.styled = !this.config.notStyled
+  },
+  computed: {
+    autosize () {
+      return this.w === 'auto'
+    }
+  },
+  methods: {
+    toggleAutoSize () {
+      if (this.w === 'auto') {
+        const elem = document.getElementById('oh-canvas-item-vdr-' + this.id)
+        this.w = this.context.component.config.w = Math.max(10, elem.clientWidth)
+        this.h = this.context.component.config.h = Math.max(10, elem.clientHeight)
+      } else {
+        this.w = this.context.component.config.w = 'auto'
+        this.h = this.context.component.config.h = 'auto'
+        this.reloadKey += 1
+      }
+    },
+    toggleShadow () {
+      this.shadow = !this.shadow
+      this.context.component.config.noCanvasShadow = !this.shadow
+    },
+    onResize (x, y, width, height) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+      this.w = this.context.component.config.w = width
+      this.h = this.context.component.config.h = height
+    },
+    onDrag (x, y) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+    },
+    onResizeStartCallback (ev) {
+      if (this.w === 'auto' || this.h === 'auto') {
+        return false
+      }
+
+      const posOK = this.onDragStartCallback(ev)
+      if (this.gridEnable) {
+        const snapW = Math.round(this.w / this.gridPitch) * this.gridPitch
+        const snapH = Math.round(this.h / this.gridPitch) * this.gridPitch
+
+        if (this.w === snapW && this.h === snapH) {
+          // Widget already on grid, can continue to resize
+          return true && posOK
+        } else {
+          // Widget was not on grid, snap to grid upon first action
+          this.w = this.context.component.config.w = snapW
+          this.h = this.context.component.config.h = snapH
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    onDragStartCallback (ev) {
+      if (this.gridEnable) {
+        const snapX = Math.round(this.x / this.gridPitch) * this.gridPitch
+        const snapY = Math.round(this.y / this.gridPitch) * this.gridPitch
+
+        if (this.x === snapX && this.y === snapY) {
+          // Origin on grid, continue dragging action
+          return true
+        } else {
+          // First snap to grid component and stop action
+          this.x = this.context.component.config.x = snapX
+          this.y = this.context.component.config.y = snapY
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    eventControl (ev) {
+      // Events are captured before bubbling to prevent undesired widget interaction when a widget has been
+      // added but the page is in edit mode.
+      if (this.context.editmode && this.context.component.slots.default.length > 0) {
+        ev.stopPropagation()
+        ev.preventDefault()
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
new file mode 100644
index 0000000000..fc956e6ca2
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
@@ -0,0 +1,255 @@
+<template>
+  <div ref="ohCanvasLayout" class="oh-canvas-layout" :class="context.editMode ? 'margin-top' : ''">
+    <f7-block v-if="context.editmode">
+      <f7-menu class="configure-layout-menu">
+        <f7-menu-item
+          @click="addItem"
+          icon="margin-left"
+          icon-f7="plus"
+          text="Add Widget" />
+        <f7-menu-item
+          v-if="context.clipboardtype"
+          @click="
+            context.editmode.pasteWidget(
+              context.component,
+              context.component.parent,
+              'canvas'
+            )
+          "
+          icon-f7="square_on_square" />
+        <f7-menu-item
+          @click="toggleGrid()"
+          icon="margin-left-half"
+          :icon-f7="grid.enable ? 'circle_grid_3x3_fill' : 'scircle_grid_3x3'"
+          style="margin-left: auto"
+          text="Grid" />
+        <f7-menu-item
+          dropdown
+          icon-f7="rectangle_3_offgrid">
+          <f7-menu-dropdown right>
+            <f7-menu-dropdown-item
+              @click="
+                context.editmode.configureWidget(
+                  context.component,
+                  context.parent,
+                  'oh-canvas-layout'
+                )
+              "
+              href="#"
+              text="Configure Canvas Layout" />
+          </f7-menu-dropdown>
+        </f7-menu-item>
+      </f7-menu>
+      <hr>
+    </f7-block>
+    <div
+      ref="canvasLayoutContainer"
+      class="oh-canvas-layout-container"
+      :style="{
+        background: context.editmode
+          ? 'var(--f7-page-master-border-color)'
+          : false,
+        'user-select': context.editmode ? 'none' : 'auto',
+        width: style.width + 'px',
+        height: style.height + 'px',
+        transform: `scale(${style.scale})`,
+        'text-align': 'center',
+        position: 'relative',
+        '--oh-canvas-item-box-shadow': config.boxShadow
+          ? config.boxShadow
+          : '0px 0px 4px 2px #444',
+        '--oh-canvas-item-svg-shadow': config.filterShadow
+          ? config.filterShadow
+          : 'drop-shadow(0px 0px 4px #444)',
+        '--oh-canvas-item-text-shadow': config.textShadow
+          ? config.textShadow
+          : '#444 0px 0px 4px',
+      }">
+      <div
+        style="
+          height: inherit;
+          width: inherit;
+          position: absolute;
+          top: 0;
+          left: 0;
+        ">
+        <img
+          class="oh-canvas-background"
+          :src="config.imageUrl"
+          :srcset="config.imageSrcSet">
+      </div>
+      <!-- Grid lines -->
+      <div
+        :style="{
+          height: 'inherit',
+          width: 'inherit',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          'background-image':
+            'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
+          'background-size': `${grid.pitch}px ${grid.pitch}px, ${grid.pitch}px ${grid.pitch}px`,
+          visibility: context.editmode && grid.enable ? 'inherit' : 'hidden',
+        }" />
+      <f7-button
+        v-if="!context.editmode"
+        @click="toggleFullscreen"
+        class="fullscreen-icon"
+        :icon-f7="
+          fullscreen
+            ? 'arrow_down_right_arrow_up_left'
+            : 'arrow_up_left_arrow_down_right'
+        " />
+      <div
+        v-if="context.editmode"
+        style="
+          opacity: 0.3;
+          padding: 4px;
+          position: absolute;
+          width: 100%;
+        ">
+        {{ getCurrentScreenResolution() }}
+        <span v-if="isRetina()"><f7-icon
+          tooltip="Screen resolution shown is the fullscreen resolution for websites. Real screen resolution is bigger."
+          f7="info_circle" /></span>
+      </div>
+      <oh-canvas-item
+        v-for="obj in layout"
+        :key="obj.id"
+        :id="obj.id"
+        :grid-enable="grid.enable"
+        :grid-pitch="grid.pitch"
+        :context="childContext(obj.item)" />
+    </div>
+  </div>
+</template>
+
+<style lang="stylus">
+.oh-canvas-layout
+  overflow visible // prevent widget menus from scrolling page
+
+  .oh-canvas-layout-container
+    margin auto // center layout when smaller than current screen
+    background-color var(--f7-page-bg-color) // theme bg (for fullscreen)
+    transform-origin top
+
+  .oh-canvas-background
+    height 100%
+    width 100%
+    object-fit contain
+
+  .fullscreen-icon
+    position absolute
+    top 2px
+    right 2px
+    z-index 1000
+</style>
+
+<script>
+import mixin from '../widget-mixin'
+import OhCanvasItem from './oh-canvas-item'
+import { OhCanvasLayoutDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhCanvasLayoutDefinition,
+  components: {
+    OhCanvasItem
+  },
+  data () {
+    return {
+      layout: [],
+      screenWidth: Number,
+      screenHeight: Number,
+      fullscreen: this.$fullscreen.getState(),
+      navbarHidden: false,
+      style: {
+        width: Number,
+        height: Number,
+        scale: 1.0
+      },
+      grid: {
+        pitch: Number,
+        enable: false
+      }
+    }
+  },
+  created () {
+    if (this.config.layoutType === 'fixed' && this.config.fixedType === 'canvas') {
+      this.style.width = this.screenWidth = this.config.screenWidth || 1280
+      this.style.height = this.screenHeight = this.config.screenHeight || 720
+      this.grid.pitch = this.config.grid || 20
+      this.grid.enable = this.config.gridEnable || false
+
+      if (!this.context.editmode) {
+        window.addEventListener('resize', this.setDimensions)
+      }
+    }
+
+    this.canvasLayoutStyle()
+    this.computeLayout()
+  },
+  mounted () {
+    // Chrome reports a wrong size in fullscreen, store initial resolution and use non-dynamically.
+    this.windowWidth = window.screen.width
+    this.windowHeight = window.screen.height
+  },
+  methods: {
+    isRetina () {
+      return window.devicePixelRatio > 1
+    },
+    getCurrentScreenResolution () {
+      return (
+        'Layout Size: ' +
+        this.screenWidth +
+        ' x ' +
+        this.screenHeight +
+        ' (Current Screen: ' +
+        this.windowWidth +
+        ' x ' +
+        this.windowHeight +
+        ')'
+      )
+    },
+    addItem () {
+      this.context.component.slots['canvas'].push({
+        component: 'oh-canvas-item',
+        config: { x: 20, y: 20, h: 150, w: 200 },
+        slots: { default: [] }
+      })
+      this.computeLayout()
+    },
+    toggleFullscreen () {
+      this.$fullscreen.toggle(this.$refs.ohCanvasLayout, {
+        wrap: false,
+        callback: (fullscreen) => {
+          this.canvasLayoutStyle()
+          this.fullscreen = fullscreen
+        }
+      })
+    },
+    toggleGrid () {
+      this.context.component.config.gridEnable = this.grid.enable = !this.grid.enable
+    },
+    canvasLayoutStyle () {
+      if (this.config.scale && !this.context.editmode) {
+        this.style.scale = parent.innerWidth / this.screenWidth
+      } else {
+        this.style.scale = 1.0
+      }
+    },
+    computeLayout () {
+      let layout = []
+      if (this.context.component.slots?.canvas) {
+        this.context.component.slots.canvas.forEach((item) => {
+          layout.push({
+            item: item,
+            id: Math.random().toString(36).substring(2)
+          })
+        })
+      }
+      this.layout = layout
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
index b6e8e52072..a7d13eb959 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-if="config.layoutType !== 'fixed'">
+    <template v-if="!config.layoutType || config.layoutType === 'responsive'">
       <oh-block v-for="(component, idx) in context.component.slots.default"
                 :key="idx"
                 :context="childContext(component)"
@@ -30,27 +30,31 @@
         </f7-block>
       </template>
     </template>
-    <template v-else>
+    <template v-else-if="config.layoutType === 'fixed' && (!config.fixedType || config.fixedType === 'grid')">
       <oh-grid-layout :context="context" />
     </template>
+    <template v-else-if="config.layoutType === 'fixed' && config.fixedType === 'canvas'">
+      <oh-canvas-layout :context="context" />
+    </template>
   </div>
 </template>
 
-<style lang="stylus">
-</style>
+<style lang="stylus"></style>
 
 <script>
 import mixin from '../widget-mixin'
 import OhBlock from './oh-block.vue'
 import OhMasonry from './oh-masonry.vue'
 import OhGridLayout from './oh-grid-layout.vue'
+import OhCanvasLayout from './oh-canvas-layout.vue'
 
 export default {
   mixins: [mixin],
   components: {
     OhBlock,
     OhMasonry,
-    OhGridLayout
+    OhGridLayout,
+    OhCanvasLayout
   }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
index 74c5949f15..472f0c333a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -36,41 +36,55 @@
                     !(context.component.slots.default && context.component.slots.default.length) &&
                     !(context.component.slots.masonry && context.component.slots.masonry.length) &&
                     !(context.component.slots.grid && context.component.slots.grid.length) &&
+                    !(context.component.slots.canvas && context.component.slots.canvas.length) &&
+                    page.uid !== 'overview' &&
                     !['responsive', 'fixed'].includes(page.config.layoutType)"
-                  class="block-narrow margin-bottom" inset>
-          <f7-block-title class="margin text-align-center">
-            Choose a layout style
-          </f7-block-title>
-          <f7-row class="text-align-center align-items-stretch">
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('responsive')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
-                <f7-icon size="70px" f7="rectangle_3_offgrid" />
-                <div class="margin-bottom">
-                  Responsive
-                </div>
-                <div class="margin-top">
-                  Create a page that automatically adjusts to the size of the screen. Suitable for use with any device.
-                </div>
-              </f7-link>
-            </f7-col>
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
-              <f7-link @click="setLayoutType('fixed')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
-                <f7-icon size="70px" f7="grid" />
-                <div class="margin-bottom">
-                  Fixed Grid
-                </div>
-                <div class="margin-top">
-                  Create a panel-like page for a specific screen size. Suitable for e.g. wall mounted tablets.
-                </div>
-              </f7-link>
-            </f7-col>
-          </f7-row>
+                  class="block-narrow no-padding">
+          <f7-col>
+            <f7-list accordion-list>
+              <f7-block-title class="margin-left">
+                Layout Type
+              </f7-block-title>
+              <f7-list-item accordion-item title="Switch to Fixed Layout">
+                <f7-accordion-content>
+                  <f7-block class="margin text-align-center">
+                    Switch to a fixed layout type, suitable for e.g. wall mounted tablets:
+                  </f7-block>
+                  <f7-row class="text-align-center align-items-stretch margin-vertical" no-gap>
+                    <f7-col width="50">
+                      <f7-link @click="setLayoutType('fixed', 'grid')" class="flex-direction-column padding margin-left-half elevation-1 elevation-hover-3" style="color: var(--f7-theme-color-text-color)">
+                        <f7-icon size="70px" f7="grid" />
+                        <div class="margin-bottom">
+                          Fixed Grid
+                        </div>
+                        <f7-block-footer class="margin-top">
+                          <small>Position and resize widgets on a grid with fixed dimensions.</small>
+                        </f7-block-footer>
+                      </f7-link>
+                    </f7-col>
+                    <f7-col width="50">
+                      <f7-link @click="setLayoutType('fixed', 'canvas')" class="flex-direction-column padding margin-right-half elevation-1 elevation-hover-3" style="color: var(--f7-theme-color-text-color)">
+                        <f7-icon size="70px" f7="rectangle_3_offgrid" />
+                        <div class="margin-bottom">
+                          Fixed Canvas
+                        </div>
+                        <f7-block-footer class="margin-top">
+                          <small>Position and resize widgets freely over a fixed background.</small>
+                        </f7-block-footer>
+                      </f7-link>
+                    </f7-col>
+                  </f7-row>
+                </f7-accordion-content>
+              </f7-list-item>
+            </f7-list>
+          </f7-col>
         </f7-block>
 
-        <oh-layout-page class="layout-page" v-else-if="ready" :context="context" :key="pageKey" :style="page.config.style"
+        <oh-layout-page class="layout-page" v-if="ready" :context="context" :key="pageKey" :style="page.config.style"
                         @add-block="addBlock"
                         @add-masonry="addMasonry"
-                        @add-grid-item="addGridItem" />
+                        @add-grid-item="addGridItem"
+                        @add-canvas-item="addCanvasItem" />
       </f7-tab>
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
         <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml?type=layout" :value="pageYaml" @input="onEditorInput" />
@@ -148,7 +162,8 @@ export default {
         config: {},
         slots: {
           default: [],
-          grid: []
+          grid: [],
+          canvas: []
         }
       },
       addFromModelContext: {},
@@ -273,12 +288,15 @@ export default {
       this.addFromModelContext = {}
       this.forceUpdate()
     },
-    setLayoutType (layoutType) {
+    setLayoutType (layoutType, fixedType) {
       this.page.config.layoutType = layoutType
+      this.page.config.fixedType = fixedType
       if (layoutType === 'responsive') {
         this.page.slots.default = []
-      } else {
+      } else if (layoutType === 'fixed' && fixedType === 'grid') {
         this.page.slots.grid = []
+      } else if (layoutType === 'fixed' && fixedType === 'canvas') {
+        this.page.slots.canvas = []
       }
       this.forceUpdate()
     },
@@ -300,7 +318,13 @@ export default {
     addGridItem (component) {
       component.slots['grid'].push({
         component: 'oh-grid-item',
-        config: { x: 5, y: 3, h: 2, w: 2 },
+        config: { x: 5, y: 3, h: 2, w: 2 }
+      })
+    },
+    addCanvasItem (component) {
+      component.slots['canvas'].push({
+        component: 'oh-canvas-item',
+        config: { x: 10, y: 10, h: 50, w: 50 },
         slots: { default: [] }
       })
       this.forceUpdate()
@@ -316,21 +340,24 @@ export default {
         config: this.page.config,
         blocks: this.page.slots.default,
         masonry: this.page.slots.masonry,
-        grid: this.page.slots.grid
+        grid: this.page.slots.grid,
+        canvas: this.page.slots.canvas
       })
     },
     fromYaml () {
       try {
         const updatedPage = YAML.parse(this.pageYaml)
-        if (updatedPage.config && updatedPage.config.layoutType && updatedPage.config.layoutType === 'fixed' &&
+        if (updatedPage.config && updatedPage.config.layoutType &&
+            updatedPage.config.layoutType === 'fixed' &&
            ((updatedPage.blocks && updatedPage.blocks.length) || (updatedPage.masonry && updatedPage.masonry.length))) {
-          throw new Error('Using blocks and masonry in fixed-size layouts is not possible')
+          throw new Error('Using blocks and masonry in fixed layouts is not possible')
         }
 
         this.$set(this.page, 'config', updatedPage.config)
         this.$set(this.page.slots, 'default', updatedPage.blocks)
         this.$set(this.page.slots, 'masonry', updatedPage.masonry)
         this.$set(this.page.slots, 'grid', updatedPage.grid)
+        this.$set(this.page.slots, 'canvas', updatedPage.canvas)
         this.forceUpdate()
         return true
       } catch (e) {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
index e935277f08..96b43e54cb 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
@@ -43,6 +43,8 @@ export default {
           pasteWidget: this.pasteWidget,
           moveWidgetUp: this.moveWidgetUp,
           moveWidgetDown: this.moveWidgetDown,
+          sendWidgetToBack: this.sendWidgetToBack,
+          bringWidgetToFront: this.bringWidgetToFront,
           removeWidget: this.removeWidget
         } : null,
         clipboardtype: this.clipboardType
@@ -285,18 +287,25 @@ export default {
     },
     moveWidgetUp (component, parentContext, slot = 'default') {
       let siblings = parentContext.component.slots[slot]
-      let pos = siblings.indexOf(component)
-      if (pos <= 0) return
-      siblings.splice(pos, 1)
-      siblings.splice(pos - 1, 0, component)
-      this.forceUpdate()
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) - 1)
     },
     moveWidgetDown (component, parentContext, slot = 'default') {
+      let siblings = parentContext.component.slots[slot]
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) + 1)
+    },
+    bringWidgetToFront (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, parentContext.component.slots[slot].length)
+    },
+    sendWidgetToBack (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, 0)
+    },
+    moveWidget (component, parentContext, slot = 'default', newPos) {
       let siblings = parentContext.component.slots[slot]
       let pos = siblings.indexOf(component)
-      if (pos >= siblings.length - 1) return
+      newPos = Math.max(0, Math.min(siblings.length, newPos))
+      if (pos === newPos) return
       siblings.splice(pos, 1)
-      siblings.splice(pos + 1, 0, component)
+      siblings.splice(newPos, 0, component)
       this.forceUpdate()
     },
     removeWidget (component, parentContext, slot = 'default') {