canvas with image

[bloodaxe 0]

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

[davej 251]

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>

[Ingolme 1,012]

Use Javascript to create a hidden <img> element and then use the drawImage() method to put the image on the canvas.

[bloodaxe 0]

Hi;

many thanks for this. I have tried both and they both work so Thank you.

Regards Bloodaxe

[astralaaron 17]

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

[Ingolme 1,012]

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.

[astralaaron 17]

I see, thank you.

[robrawat 0]

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