1

I was almost completing with jQuery draggable and droppable generator image, but the html2canvas does not download with css filters

I'm starting over from scratch, I'm having trouble understanding how to drag images into the drop, using html5 canvas. I also want to enter text to Appear on the canvas And Then be possible drag and also change their properties (font, size, color)

https://jsfiddle.net/xn5n9cos/2/

 var canvas = document.getElementById("DropHere");
var ctx = canvas.getContext("2d");

ctx.font = "100px arial";
ctx.strokeText("Test", 50, 100);

function allowDrop(ev) {
ev.preventDefault(); 
} 

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.class); 
} 

function drop(ev) {
var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementByClass(data)); ev.preventDefault();

}

Of course I need to understand how to apply filters on each drag object

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

Thanks for any help

Gislef
  • 1,555
  • 3
  • 14
  • 37
  • 2
    In supporting browsers, you can't append elements into a canvas element. Think of it as an img element. You'll have to draw on it. – Kaiido Jan 09 '16 at 04:34
  • Take of look of my answer here. http://stackoverflow.com/questions/34626548/replace-text-with-image-by-get-user-input-in-javascript/34626874?noredirect=1#comment57009810_34626874 – ketan Jan 09 '16 at 05:03
  • @Kaiido I thought was possible to see many examples like http://rectangleworld.com/demos/OOPDragging/OOPDragging.html http://jsfiddle.net/m1erickson/2Us2S/ and http://jsfiddle.net/m1erickson/GX6HS/ . I think in html5 canvas as an image editor – Gislef Jan 09 '16 at 05:24
  • 1
    Yes, but each of the examples you provided do **draw** on the canvas. It's not just an HTML element that is appended. – Kaiido Jan 09 '16 at 05:38
  • [This Q&A](http://stackoverflow.com/questions/21656003/html5-drag-and-drop-images-from-a-toolbar-to-a-canvas) shows how to use jqueryUI to drag an img element and "drop" it on the canvas (drop == draw the same image onto the canvas). And [this Q&A](http://stackoverflow.com/questions/21859113/canvas-drag-and-drop/21860400#21860400) shows how to drag text elements to the canvas. You can search Stackoverflow for additional examples showing how to "drag" images & text around a canvas (drag == clear the canvas and redraw items in their new positions). – markE Jan 09 '16 at 07:49
  • ... and a @Kaiido says, nothing drawn on a canvas element can be moved. To simulate movement you must clear the canvas and redraw the images/text in their new positions. – markE Jan 09 '16 at 07:56
  • Now I understand, thank you all for your explanations. It will be a learning curve a bit long, so I better try a solution with jquery to print a div with css filters. Do you know any solution for this? Do you think html2canvas offers some security risk? – Gislef Jan 09 '16 at 16:27
  • @Zeli. To your new questions: *No* & *No*. Security restrictions will not permit you to save divs to an image and html2canvas does not create security risks. Good luck with your project! – markE Jan 09 '16 at 19:06

0 Answers0