bloodaxe 0 Posted September 30, 2013 Report Share Posted September 30, 2013 Hi; This is very basic so sorry for that, but, can I actually draw an image into a canvas from a file in the project folder? I want to have a click button which when clicked puts an image, .jpg in the canvas but my code below does nothing except put the image in the window next to the other controls. It is pretty much the code example in the w3 schools example page but it doesn't draw the image into the canvas when the button is clicked. I want to draw an image from the project folder rather than draw it from an image already on the page. Regards Bloodaxe. index.html testprojectcss.css Quote Link to post Share on other sites
davej 251 Posted September 30, 2013 Report Share Posted September 30, 2013 Try... <script>var img = new Image();img.src = "Weymouth%20by%20steam%202012%20047.jpg";function myLine() {var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"black");grd.addColorStop(1,"green");ctx.fillStyle=grd;ctx.fillRect(0,0,200, 200);}function myRad() {var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var grd=ctx.createRadialGradient(100,100,5,100,100,150);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(0,0,200,200);} function myImg() {var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.drawImage(img,10,10);}</script> Quote Link to post Share on other sites
Ingolme 1,019 Posted September 30, 2013 Report Share Posted September 30, 2013 Use Javascript to create a hidden <img> element and then use the drawImage() method to put the image on the canvas. Quote Link to post Share on other sites
bloodaxe 0 Posted October 2, 2013 Author Report Share Posted October 2, 2013 Hi; many thanks for this. I have tried both and they both work so Thank you. Regards Bloodaxe Quote Link to post Share on other sites
astralaaron 17 Posted October 3, 2013 Report Share Posted October 3, 2013 Ignolme, I am just curious about whether or not there is an advantage to creating a hidden <img> element rather than the way davej showed in his example ( var img = new Image(); img.src = "Weymouth%20by%20steam%202012%20047.jpg"; ) Â thanks Quote Link to post Share on other sites
Ingolme 1,019 Posted October 4, 2013 Report Share Posted October 4, 2013 Well, the way he did it is what I was referring to, the image is technically hidden. There's no advantage to appending it to the document. Quote Link to post Share on other sites
astralaaron 17 Posted October 4, 2013 Report Share Posted October 4, 2013 I see, thank you. Quote Link to post Share on other sites
robrawat 0 Posted May 23, 2014 Report Share Posted May 23, 2014 can you told me how to get the image from canvas and add event on that imagemeans["t2",cr.plugins_.Sprite,false,[],0,0,null,[["Default",5,false,1,0,false,6056448206965757,[["images/sprite2-sheet0.png", 155, 0, 0, 250, 250, 1, 0.5, 0.5,[],[],1]]]],[],false,false,1137731541052407,[],null], ["t3",cr.plugins_.Touch,false,[],0,0,null,null,[],false,false,8636152857696988,[],null,[1]], ["t4",cr.plugins_.Sprite,false,[],1,0,null,[["Default",5,false,1,0,false,9050402499563591,[["images/sprite-sheet0.png", 155, 0, 0, 250, 250, 1, 0.5, 0.5,[],[],1]]]],[["Sine",cr.behaviors.Sin,8447855769118502]],false,false,1421800220649511,[],null]in this array I have two images...and want to add touch alert event on "sprite2-sheet0.png" object so can u tell me how to add addEventListener js on that images Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.