Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery ui draggable: saving to canvas

Posted on 2014-10-27
2
Medium Priority
?
270 Views
Last Modified: 2014-10-28
I have a product image (prodimage) and with a button click I can add it to a canvas. For now both the product image and the canvas are on the same html page.

function CanvasIt() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("prodimage");
ctx.drawImage(img, 10, 10);
};

Open in new window


I also have some draggable images and after the are positioned over the prodimage I would like to add them to the same canvas.

<script type="text/javascript">
$(function() {
	
	$("#graphicCount11").draggable({ 
		containment: "#product-image-wrapper", 
		scroll: false,
		stop: function(event, ui) {
		   };
	 });
</script>

Open in new window


Anyone have an idea of how this can be done?
0
Comment
Question by:Gary Samuels
2 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40407559
test page : http://jsfiddle.net/rt20paok/

jQuery(document).ready(function() {
    CanvasIt();
	$("#graphicCount11").draggable({ 
		containment: "#product-image-wrapper", 
		scroll: false,
		stop: function(event, ui) {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = $(this).get(0);
            ctx.drawImage(img, 10, 10);
        }
	 });
});

function CanvasIt() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("prodimage");
    ctx.drawImage(img, 10, 10);
};

Open in new window

0
 

Author Closing Comment

by:Gary Samuels
ID: 40409123
thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

926 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