JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<!--<script src="fabric.min.js" type="text/javascript"></script>-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<style type="text/css">
    body, canvas { margin: 0; overflow: hidden; }
</style></head><body>
<canvas id="c"></canvas>
<script type="text/javascript">

// fabric.js visuals
var canvas = new fabric.Canvas('c')

// full screen
function resizeCanvas() {
    canvas.setHeight(window.innerHeight)
    canvas.setWidth(window.innerWidth)
    canvas.renderAll()
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas, false)



const box_width = 100
const box_height = 100

// box
var rect = new fabric.Rect({
    width: box_width, height: box_height,
    fill: false, stroke: '#000',
})

// text
// vertical align = center
var text = new fabric.Textbox(
    'hello', {
    originX: 'center', originY: 'center',
    left: 0.5*box_width, top: 0.5*box_height,
})

// group
var group = new fabric.Group(
	[rect, text], {
	left: 50, top: 50,
})

canvas.add(group)



</script></body></html>