0

I'm trying to set background image for canvas element.

At the first, I tried to set background using style attributes. But it didin't work for me, shows me a black screen. Then I tried other methods.

I'm able to set background using canvas methods but, I don't want to do this with that because in every single movement I have to clear background and set again. And that make slow down application, specially on phones.

ctx.drawImage(img,0,0,canvas.width,canvas.height)

Also I tried to clear and set specific area which where movement happened but it's also causes performance problem on some old phones.

So.. I started from begin... I have to set background using style attributes.

background-image: url("images/backgrounds/1.jpg");

I was using above property to set background but it didin't work.. How do I fix this, How can I make it work ?

Teoman Tıngır
  • 2,766
  • 2
  • 21
  • 41

1 Answers1

0

I have tried this and it was successful. It could be that you weren't setting the webkit style of the canvas.

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.fill();
.canvas{
width:500px;
height:500px;
background-image: url("https://bigcitiloops.com/files/brands/samplekingloops/artwork/Just%20samples%20500x500.jpg");
-webkit-background-image: url("https://bigcitiloops.com/files/brands/samplekingloops/artwork/Just%20samples%20500x500.jpgq");
}
<canvas class="canvas" id="can"></canvas>

I have even tested drawing on it as shown by the black circle on it.

IbzDawg
  • 79
  • 7