Images on CANVAS tag HTML5

Posted on 2011-04-25
Last Modified: 2012-06-27
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.
Question by:nedlogan
    LVL 3

    Accepted Solution

    Refer this example...

    <canvas id="Canvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    <script type="text/javascript">
    var c=document.getElementById("Canvas1");
    var contxt=c.getContext("2d");
    var img=new Image();
    //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

    Open in new window

    LVL 2

    Author Comment

    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:

    Thanks anyway for your answer.

    LVL 2

    Author Closing Comment

    Thanks, I figured it out based on your code.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now