Hello
I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please?
function drawCircle(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 25, 0, 2 * Math.PI);
ctx.stroke();
}
function clearArea() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
return false;
}
function drawEllipse(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
ctx.stroke();
}
function drawP(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "12px serif";
ctx.fillText("p", 50, 100);
}
function drawQ(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "12px serif";
ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
var drawtype = $('#drawType').val().toLowerCase();
switch(drawtype) {
case 'c':
drawCircle();
break;
case 'e':
drawEllipse();
break;
case 'p':
drawP();
break;
case 'q':
drawQ();
break;
}
return false;
}
As you can see I'm using jquery already in my switch statement...