CODEWITHSUNDEEP
javascriptcssimage
The Good Guy
The Good Guy

Reputation: 31

Linking images from CSS to Javascript

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();

}

Upvotes: 0

Views: 62

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

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>

Upvotes: 1

Related Questions