Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

Images on CANVAS tag HTML5

Hi,
What I'm trying to do is quite complicated (for me at least), I want to display 2 images on an html5 canvas element and have one of them transparent so the other image shows through. When they are positioned the user can click a button and save the resulting image to the server.

I'm able to get bits of this working but not altogether.

Does someone know how to do this or point me to a tutorial or script for doing this?

Thanks in advance.
nl
0
nedlogan
Asked:
nedlogan
  • 2
1 Solution
 
Mrugesh1Commented:
Refer this example...

 
<!DOCTYPE HTML>
<html>
<body>

<canvas id="Canvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("Canvas1");
var contxt=c.getContext("2d");

var img=new Image();
img.src="img_flwr.png";


//contxt.drawImage(img, x,y); where x=left position, y=top Position
contxt.drawImage(img, 0, 50);
contxt.globalAlpha = 0.7;
contxt.drawImage(img, 10,10); // Change the x and y positions accordingly


</script>

</body>
</html>

Open in new window

0
 
nedloganAuthor Commented:
Hi,
Thanks I can sort of do that bit, what I'm struggling with is letting the user zoom in and out of the TOP image and rotate it using clickable buttons, there is something similar here:
http://jsfiddle.net/prowla/Kj3UL/

Thanks anyway for your answer.

nl
0
 
nedloganAuthor Commented:
Thanks, I figured it out based on your code.
Regards,
nl
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now