How to set image to be

Question

I'm working on a project that will have a table and canvas field below the table.

I need to put one of the pictures to be a background and it was in my case tshirt.png.

Until now I have done the following. I have two files (index.html & jQuery.js)

index

<html>
  <head>
<script src="js/jQuery.js"></script>
 </head>
   <table border="1">
        <tr>
    <td>#</td>
    <td>filename</td>
    <td>x</td>
    <td>y</td>
    <td>z</td>
        </tr>

<tr>
    <td>1</td>
    <td><img src="images/sheep.png" width="40px" height="40px"></img></td>
    <td><input type="text" value="" name="x"></td>
    <td><input type="text" value="" name="y"></td>
    <td><input type="text" value="" name="z"></td>
</tr>
<tr>
    <td>2</td>
    <td><img src="images/tshirt.png" width="40px" height="40px"></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
  </tr>
  <tr>
    <td>3</td>
    <td>item.png</td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
    <td><input type="text" value=""></td>
   </tr>
    </table>

   <section id="main">
   <canvas  id="canvas" width="1024" height="768" style="border:1px solid red;">    
   </canvas>
   </section>
</html>

jQuery.js

function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');

    var pic = new Image();
    pic.src = "images/sheep.png";
    pic.addEventListener("load", function() { canvas.drawImage(pic,0,0,100,200)}, false);

    var background = new Image();
    background.src = "images/tshirt.png";
    background.addEventListener("load",function(){
        canvas.drawImage(background,0,250,200,300)}, false);
    }
    window.addEventListener("load", doFirst, false);

Any help is welcome

How would it be in my case? If you could write the code I would be very grateful? — Haris Hajdarevic, Feb 19 '13 at 19:34
I don't know how it would be in your case because your intention is not clear, what you want to do here.. Do you know how to set a background in css? — El Hocko, Feb 19 '13 at 19:37
I want to set tshirt.png to be the background (background.src = "images/tshirt.png";). . I do not have a big experience in working with CSS. Additional problems it's giving me because the image is loaded from jQuery.js. — Haris Hajdarevic, Feb 19 '13 at 19:41
ok.. but why do you load the image via js? check it out: http://jsfiddle.net/eukVv/ — El Hocko, Feb 19 '13 at 19:51

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

The canvas certainly takes a different mindset and approach but remember sometimes to take a step back and think of a more 'simple' approach, this will help from over engineering your code.

Just use CSS to define the background

background: url("images/tshirt.png");

Here is how you can set it in JavaScript via jQuery from a previous post

edited May 23 '17 at 12:04

Community

1
1

answered Feb 19 '13 at 20:07

afreeland

3,889
3
31
42

That would not solve my problem. The project was such that I would have a table with rows of sheep and shirts for example. Each row will have coordinates x, y, z. If I change the coordinates of the tshirt(background) or sheep.png in the table will be moved on canvas. That's what I get at the end of the project. This way you offered me a solution if I delete: var background = new Image(); background.src = "images/tshirt.png"; background.addEventListener("load",function(){ canvas.drawImage(background,0,250,200,300)}, false); and just write in css background: url("images/tshirt.png"); – Haris Hajdarevic Feb 19 '13 at 20:43
It will not displayed tshirt.png as the background. – Haris Hajdarevic Feb 19 '13 at 20:44
So are you wanting an image for each row then...for example...the sheep row has a background of sheep.png...and the shirts row has a background of shirts.png? Is the canvas in behind your table? – afreeland Feb 19 '13 at 21:58

How to set image to be background

1 Answers1

How to set image to be