[Webinar] Streamline your web hosting managementRegister Today

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

jQuery ui draggable: saving to canvas

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
Gary Samuels
Asked:
Gary Samuels
1 Solution
 
leakim971PluritechnicianCommented:
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
 
Gary SamuelsPlant ManagerAuthor Commented:
thanks
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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