Vue

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
<div id="app">
	<canvas ref="can">
	</canvas>
</div>

Vue

new Vue({
  el: "#app",
  data() {
		return {
			text: "R"
		}
	},
  methods: {
		text1(){
			let left = 0
			let top = 0

			let text = new fabric.Text(this.text, {
				fontSize: 80,
				fontFamily: "Arial"
			});

			this.canvas.add(text);

			text.set({
				top: top,
				left: left,
				stroke: 'red',
				strokeWidth: 2,
				paintFirst: 'stroke',
				fill: 'rgba(0,0,0,0)',
				scaleX: 4,
				strokeUniform: true
			});
		},
		text2(){
			let left = 0
			let top = 100

			for (let i = 0; i < this.text.length; i++) {
				let text = new fabric.Text(this.text[i], {
					fontSize: 120,
					fontFamily: "Arial"
				});
				
				let boundingBox = text.getBoundingRect()

				text.set({
					top: top,
					left: left,
					stroke: 'red',
          strokeWidth: 2,
          paintFirst: 'stroke',
          fill: 'rgba(0,0,0,0)',
					scaleX: 3,
					strokeUniform: true
					
				});
				left += boundingBox.width
				this.canvas.add(text);
			}
		},
		circle(){
			let left = 0
			let top = 100
			var circle2 = new fabric.Circle({
				top: top,
				left: left,
				radius: 65,
				fill: '#4FC3F7',
				opacity: 0.7,
				stroke: 'blue',
				strokeWidth: 3,
				strokeUniform: true,
				scaleX: 3
			});
			this.canvas.add(circle2);
		}
  },
	mounted() {
		let ref = this.$refs.can;
		this.canvas = new fabric.Canvas(ref,
		{
			width: 800,
			height: 800,
			backgroundColor: '#555555'
		});
		
		this.text1()
		this.circle()
	
  },
})