I am making a drawing board in canvas. I am trying to change the background of the canvas when a input image is clicked using jquery.

This is my html code for the canvas and the button

Canvas:

<canvas id="myCanvas" width="640" height="480"></canvas>

Input type image on click:

<section id="canvascolor">
<input id="whitecanvas" class="canvasborder" type="image" src="images/whitecanvas.jpg"   onClick="Whitecanvas()">
<input id="blackcanvas" class="canvasborder" type="image" src="images/blackcanvas.jpg" onClick="Blackcanvas()">
<input id="yellowcanvas" class="canvasborder" type="image" src="images/yellowcanvas.jpg" onClick="Yellowcanvas()">
<input id="bluecanvas"  class="canvasborder" type="image" src="images/bluecanvas.jpg" onClick="Bluecanvas()">
<input id="redcanvas" class="canvasborder" type="image" src="images/redcanvas.jpg" onClick="Redcanvas()">
<input id="greencanvas" class="canvasborder" type="image" src="images/greencanvas.jpg" onClick="Greencanvas()">
</section>

CSS:

canvas{

background-image:url(../images/whitetexturepaper.jpg);
background-repeat:no-repeat;
background-size:cover;

}

I have tried the following jquery but it doesnt work!:

function Whitecanvas(){
    $("#myCanvas").css("background-image","url(images/whitetexturepaper.jpg)");
  }

I am making a drawing board in canvas. I am trying to change the background of the canvas when a input image is clicked using jquery.

This is my html code for the canvas and the button

Canvas:

<canvas id="myCanvas" width="640" height="480"></canvas>

Input type image on click:

<section id="canvascolor">
<input id="whitecanvas" class="canvasborder" type="image" src="images/whitecanvas.jpg"   onClick="Whitecanvas()">
<input id="blackcanvas" class="canvasborder" type="image" src="images/blackcanvas.jpg" onClick="Blackcanvas()">
<input id="yellowcanvas" class="canvasborder" type="image" src="images/yellowcanvas.jpg" onClick="Yellowcanvas()">
<input id="bluecanvas"  class="canvasborder" type="image" src="images/bluecanvas.jpg" onClick="Bluecanvas()">
<input id="redcanvas" class="canvasborder" type="image" src="images/redcanvas.jpg" onClick="Redcanvas()">
<input id="greencanvas" class="canvasborder" type="image" src="images/greencanvas.jpg" onClick="Greencanvas()">
</section>

CSS:

canvas{

background-image:url(../images/whitetexturepaper.jpg);
background-repeat:no-repeat;
background-size:cover;

}

I have tried the following jquery but it doesnt work!:

function Whitecanvas(){
    $("#myCanvas").css("background-image","url(images/whitetexturepaper.jpg)");
  }

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited Nov 9, 2013 at 16:04 asked Nov 9, 2013 at 15:58 user2953775user2953775 1

• Since you will let the user draw on that image, I suggest you use 2 elements instead of a single canvas with a background-image. Create a background img element with a foreground canvas element absolutely positioned directly on top of that image. The background image will show through the canvas. You will increase drawing performance because you don't have to redraw the image each time the user changes their drawing. – markE Commented Nov 9, 2013 at 17:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Put your code at the end after element is defined .

Fiddle DEMO

problem you are defining function before element is in DOM.

---

Better use jQuery Version

remove onclick events from input tags in section

Fiddle DEMO

$(document).ready(function () {
    $("#canvascolor > input").click(function () {
        var img = $(this).attr('src');
        $('#myCanvas').css("background-image", "url(" + img + ")");
    });
});

Try to use only one ID

function Whitecanvas() {
    $("#whitecanvas").css("background-image", "url(images/whitetexturepaper.jpg)");
}