Jump to content
Sign in to follow this  
bloodaxe

canvas with image

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...