Jump to content

canvas with image


bloodaxe

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

Link to comment
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>
Link to comment
Share on other sites

  • 7 months later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...