CODEWITHSUNDEEP
javascriptcsscanvasfabricjs
anonymoose
anonymoose

Reputation: 1243

Canvas background not behind objects

So I'm using fabric.js and a few separate .php pages to display different sized canvases. On one page I have: 

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground11x14.jpg')"></canvas>

And on another page I have:

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground16x20.jpg')"></canvas>

and get the background I want but when I go to add an object they spawn behind the background. How can I force the image to be behind added objects like text and images?

Thanks in advance.

Upvotes: 0

Views: 526

Answers (2)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32879

Instead of setting the canvas­'s background image using inline style attribute, set it in your css file , like so ...

#c {
   background: url(./images/backgrounds/AmericanFlagBackground11x14.jpg)
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   top: 100,
   left: 100,
   width: 100,
   height: 100,
   fill: '#07C',
   originX: 'center',
   originY: 'center'
});
canvas.add(rect);
#c {
   background: url(http://i.imgur.com/Q6aZlme.jpg)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Upvotes: 1

Emil S. J&#248;rgensen
Emil S. J&#248;rgensen

Reputation: 6366

Seems to work fine?

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.style.backgroundImage = "url('https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100')";
setTimeout(function() {
  canvas.getContext("2d").fillRect(10, 10, 1000, 1000);
}, 1000 * 2);

Upvotes: 0

Related Questions