fabric testing

text on top of rectangle, no group

by andersand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="canvasId"></canvas>

<!-- note to self: hm this works so must be something with my app 
                   gonna try using a group anyway 
                   
                   
                   -->

CSS

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #333;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* load resources off screen */
img, audio {
    position: absolute;
    top: -10000px;
}

JavaScript

let canvas = new fabric.Canvas("canvasId", {
  stopContextMenu: true,
  preserveObjectStacking: true
})

window.addEventListener("resize", resize, false)
resize()

let x= 0
let y= 0
let width= 400
let height= 300
let title="Title Text"

let titleBar = new fabric.Rect({
  fill: "gray",
  left: x,
  top: y,
  width: width,
  height: 25,
  hasControls: false,
  hasBorders: false,
})
let dialogTitle = new fabric.Text(title, {
  left: x + 5,
  top: y + 2,
  width: width - 25,
  height: 22,
  fontSize: 20,
  fill: "white",
  hasControls: false,
  hasBorders: false,
})

canvas.add(titleBar, dialogTitle)

function resize() {
  canvas.setWidth( window.innerWidth)
  canvas.setHeight( window.innerHeight)
  canvas.renderAll()
}