bloodaxe Posted September 30, 2013 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 Link to comment Share on other sites More sharing options...
davej Posted September 30, 2013 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> Link to comment Share on other sites More sharing options...
Ingolme Posted September 30, 2013 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. Link to comment Share on other sites More sharing options...
bloodaxe Posted October 2, 2013 Author Share Posted October 2, 2013 Hi; many thanks for this. I have tried both and they both work so Thank you. Regards Bloodaxe Link to comment Share on other sites More sharing options...
astralaaron Posted October 3, 2013 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 4, 2013 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. Link to comment Share on other sites More sharing options...
astralaaron Posted October 4, 2013 Share Posted October 4, 2013 I see, thank you. Link to comment Share on other sites More sharing options...
robrawat Posted May 23, 2014 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now