title: How to change the canvas background image when a input type button is clicked using jquery?
body: <p>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.</p>
  
  <p>This is my html code for the canvas and the button</p>
  
  <p>Canvas:</p>
  
  <pre><code>&lt;canvas id="myCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Input type image on click:</p>
  
  <pre><code>&lt;section id="canvascolor"&gt;
  &lt;input id="whitecanvas" class="canvasborder" type="image" src="images/whitecanvas.jpg"   onClick="Whitecanvas()"&gt;
  &lt;input id="blackcanvas" class="canvasborder" type="image" src="images/blackcanvas.jpg" onClick="Blackcanvas()"&gt;
  &lt;input id="yellowcanvas" class="canvasborder" type="image" src="images/yellowcanvas.jpg" onClick="Yellowcanvas()"&gt;
  &lt;input id="bluecanvas"  class="canvasborder" type="image" src="images/bluecanvas.jpg" onClick="Bluecanvas()"&gt;
  &lt;input id="redcanvas" class="canvasborder" type="image" src="images/redcanvas.jpg" onClick="Redcanvas()"&gt;
  &lt;input id="greencanvas" class="canvasborder" type="image" src="images/greencanvas.jpg" onClick="Greencanvas()"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>canvas{
  
  background-image:url(../images/whitetexturepaper.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  </code></pre>
  
  <p>}</p>
  
  <p>I have tried the following jquery but it doesnt work!:</p>
  
  <pre><code>function Whitecanvas(){
      $("#myCanvas").css("background-image","url(images/whitetexturepaper.jpg)");
    }
  </code></pre>