I'm quite stuck on how to drag the images to my canvas. So far I was able to drag the text around well... But something's do trigger to remove my image everytime I post a new Dedication..
I'm very confuse at the codes which I just got it.
Here's my code:
function updateTotal() {
if (document.getElementById('fig1').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://vignette1.wikia.nocookie.net/doratheexplorer/images/8/88/Dora_Exploradora_(11).png/revision/latest?cb=20130928190347';
}
if (document.getElementById('fig2').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://vignette1.wikia.nocookie.net/angrybirds/images/f/f7/Red_shoked_3.png/revision/latest?cb=20130505082125';
}
if (document.getElementById('fig3').checked)
{ var context = document.getElementById('display').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ context.drawImage(imageObj, 100, 100); }
imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';
}
// FUNCTION FOR DISPLAYING AND DRAGGING THE TEXT!
if (document.getElementById('design3').checked) {
var canvas2 = document.getElementById("display");
context = canvas2.getContext("2d");
var $canvas2 = $("#display");
var canvasOffset = $canvas2.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas2.scrollLeft();
var scrollY = $canvas2.scrollTop();
var startX;
var startY;
var texts = []; // an array to hold text objects
var selectedText = -1;// this var will hold the index of the hit-selected text
function draw() { // clear the canvas & redraw all texts
context.clearRect(0, 0, canvas2.width, canvas2.height);
for (var i = 0; i < texts.length; i++) { var text = texts[i];
context.fillText(text.text, text.x, text.y); }
}
function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(d) {
d.preventDefault();
startX = parseInt(d.clientX - offsetX);
startY = parseInt(d.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i; } }
}
function handleMouseUp(d) { // done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseOut(d) { // also done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseMove(d) {
if (selectedText < 0) { return; }
d.preventDefault();
mouseX = parseInt(d.clientX - offsetX);
mouseY = parseInt(d.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw(); }
$("#display").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
$("#display").mousemove(function (d) { handleMouseMove(d); });
$("#display").mouseup(function (d) { handleMouseUp(d); });
$("#display").mouseout(function (d) { handleMouseOut(d); });
$("#text_dedi").click(function () {
var y = texts.length * 20 + 20;
var text = { text: $("#dedi_text").val(),
x: 20,
y: y
};
context.font = "30px Roboto";
text.width = context.measureText(text.text).width;
text.height = 16;
text.color = "#ffffff";
texts.push(text); // put this new text in the texts array
draw(); // redraw everything
});
//this is the code for CLEAR BUTTON
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas2.width, canvas2.height);
texts = []; },
false);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="design3" name="design_3" onchange="updateTotal()" />Dedication (click me first)
<div class="disp_dedi"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication">
<button id="text_dedi"> Post </button> <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()"> </div>
<br> <input type="radio" id="fig1" name="figurine_select" value="dora" onchange="updateTotal()" /> Dora
<input type="radio" id="fig2" name="figurine_select" value="Angry Bird" onchange="updateTotal()" /> Angry Bird
<br> <input type="radio" id="fig3" name="figurine_select" value="barbie" onchange="updateTotal()" /> Barbie
<canvas id="display" height="400px" width="600px" style="position:absolute;"> </canvas>And i also wan't to remove the image once i choose other image. As you can see, the image will disappear everytime I drag the dedication.
I'm really confused how to fix it... THANK YOU IN ADVANCE!!!
