Linking images from CSS to Javascript

Question

I want to link an image from CSS to Javascript but my code does not work.

CSS :

.backImage {

    background-image: url("img/level1.jpg");
    background-repeat: repeat-y;

}

Javascript Code :

var x1 = 450;
var y1 = 40;
var speed1 = 5;
var angle1 = 90;
var mod1 = 1;        

var tmp= $("<div>").addClass('backImage');
var src = tmp.css('background-image').match(/[^"][^"]+/g)[1];

console.log(src);

var back = new Image();
    back.src = src;  

function drawBackground() {

    x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);
    y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

    context.save();
    context.translate(x1, y1);
    context.rotate(Math.PI / 180 * angle1);
    context.drawImage(back, -(back.width / 2), -(back.height / 2));
    context.restore();

}

What do you mean by "link?" Have you tried moving the context.drawImage(...) call into an image onload handler? Why do you need to do this at all? It seems like an XY problem. — Matt Ball
– Matt Ball, Commented Dec 13, 2014 at 1:54
"but my code does not work" - what doesn't work specifically? you can't get the filename? you can't assign it to back.src? what? — Deryck
– Deryck, Commented Dec 13, 2014 at 2:03

Weafs.py · Accepted Answer · 2014-12-13 02:03:25Z

1

I'm guessing you want to extract an image from the CSS background-image source and draw it on canvas. This is how its done.

var tmp = $("<div>").addClass('backImage');
var src = tmp.css('background-image').match(/[^"][^"]+/g)[1];
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d');

console.log(src);

var back = new Image();
back.src = src;
back.onload = drawBackground;

function drawBackground() {
  canvas.width = back.width;
  canvas.height = back.height;
  context.drawImage(back, 0, 0);
}

.backImage {
  background-image: url("http://placehold.it/200/200");
  background-repeat: repeat-y;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

answered Dec 13, 2014 at 2:03

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

The Good Guy Over a year ago

The background is not showing up, heres a fiddle i made: jsfiddle.net/jesse_meth/xp8echja

The Good Guy Over a year ago

But on the fiddle i already have javascript, i dont have to use that.

Weafs.py Over a year ago

@TheGoodGuy - I don't understand. What are you expecting to it to load as background?

The Good Guy Over a year ago

just to get that onto the canvas but load it on javascript

The Good Guy Over a year ago

Yah but theres no image on the canvas

|

Collectives™ on Stack Overflow

Linking images from CSS to Javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related