Currently, I am facing an issue where I want to manipulate images on a canvas using FabricJS inside a VueJS app. In the view component, there is a prop called background which I pass in and then use fabric.Image.fromURL() to load it onto the canvas. However, nothing seems to appear on the canvas:
<template>
<div>
<h1>Edit Game</h1>
<canvas id="game-board" width="400px" height="400px"></canvas>
<img :src="background" width="100px" height="100px">
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fabric } from 'fabric'
export default {
mounted() {
let canvas = new fabric.Canvas('game-board');
fabric.Image.fromURL(this.background, function(oImg) {
canvas.add(oImg);
});
},
computed: {
...mapGetters([
'background'
])
}
}
</script>
Although the background image loads properly into an img tag, it does not appear on the canvas as intended.
You can view the screenshot of the canvas and image here.
The functionality works correctly on this Code Sandbox, but for some reason, executing nearly the same code locally yields different results.