Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Javascript

Select Different Image For Canvas Background

Post a Comment
I need to know how can I change the image background in canvas to draw what is needed in the selected image? I use this script William malone canvas and I can save the image in DB

Solution 1:

change the image background is very simple,you just need to write a function and do this:

outlineImage.src = "your image src";

then background image will changed! You may have a try.

Is this you wanted?

make a select list

change selected option to change background

You should load needed js files before that function,and be sure that js file is avaliable,especially html5-canvas-drawing-app.js,It's the core function,prepareCanvas and outlineImage are defined in this file.

<!DOCTYPE html><html><head><title>HTML5 Create HTML5 Canvas JavaScript Drawing App Example</title></head><body><divid="canvasDiv"></div><!--src link write in attribute name or id,I suggest that--><selectid="changeSrc"><optionname="images/1.png">Bg1</option><optionname="images/2.png">Bg2</option></select><!-- Load js Files --><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--><scripttype="text/javascript"src="html5-canvas-drawing-app.js"></script><scripttype="text/javascript"> 
    $(document).ready(function() {
         prepareCanvas();
    });

    $("#changeSrc").change(function(){
      var src=$(this).children(':selected').attr('name');    //get selected option's name
      outlineImage.src=src;                                  //change background!
    });
    </script></body></html>

If it doesn't work yet,I can write an example send to you.

Post a Comment for "Select Different Image For Canvas Background"