get event of both canvas in html5

[pritammalunjkar]

[pritammalunjkar]

//This is js code----
var mousePressed = false;
var lastX, lastY;
//var ctx;
// Make sure the image is loaded first otherwise nothing will draw.

const IMG_NAMES =
{
CARDIOVASCULAR_SYSTEM: 'Cardiovascular_System.jpg',
FEMALE_REPRODUCTIVE_SYSTEM_1: 'Female_Reproductive_System_1.jpg',
FEMALE_REPRODUCTIVE_SYSTEM_2: 'FeMale_Reproductive_System_2.jpg',
GASTROINTESTINAL_SYSTEM: 'Gastrointestinal_System.jpg',
MALE_REPRODUCTIVE_SYSTEM: 'Male_Reproductive_System.jpg',
NEUROLOGICAL_SYSTEM: 'Neurological_System.jpg',
RESPIRATORY_SYSTEM: 'Respiratory_System.jpg',
UROGENITAL_SYSTEM_EXAMINATION: 'Urogenital_System_examination.jpg',

ABDOMINAL_EXAMINATION: 'Abdominal_Examination.jpg',
ANAL_EXAMINATION: 'Anal_Examination.jpg',
BREAST_EXAMINATION: 'Breast_Examination.jpg',
CHEST_EXAMINATION: 'Chest_Examination.jpg',
EAR_EXAMINATION: 'Ear_Examination.jpg',
EYE_EXAMINATION: 'Eye_Examination.jpg',
HEAD_EXAMINATION: 'Head_Examination.jpg',
JOINT_EXAMINATION: 'Joint_Examination.jpg',
MOUTH_EXAMINATION: 'Mouth_Examination.jpg',
NOSE_EXAMINATION: 'Nose_Examination.jpg',
SYSTEMIC_EXAMINATION: 'Systemic_Examination.jpg',
TONGUE_EXAMINATION: 'Tongue_Examination.jpg',

}

function fnloadBodyTemplate(img_name) {

ctx = document.getElementById('myCanvas').getContext("2d");
var background = new Image();

background.src = "../Content/Images/ce_images/" + img_name;
background.onload = function () {
    // alert("background.onload:"+background);
    //alert(background);
    //ctx.drawImage(background, ctx.width / 2 - background.width / 2, ctx.height / 2 - background.height / 2);
    ctx.drawImage(background, 100, 0);
}

}

function InitThis(CE_id) {
alert("InitThis Function:"+CE_id);
// CE_id = "1";
// alert(IMG_NAMES.CARDIOVASCULAR_SYSTEM);

switch (CE_id) {
    case 1:  //Cardiovascular System
        fnloadBodyTemplate(IMG_NAMES.CARDIOVASCULAR_SYSTEM);
        break;
    case 2:  //Female Reproductive System 1
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_1);
        break;
    case 3:  //Female Reproductive System 2
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_2);
        break;
    case 4:  //Gastrointestinal System
        fnloadBodyTemplate(IMG_NAMES.GASTROINTESTINAL_SYSTEM);
        break;
    case 5:  //Male Reproductive System
        fnloadBodyTemplate(IMG_NAMES.MALE_REPRODUCTIVE_SYSTEM);
        break;
    case 6:  //Neurological System
        fnloadBodyTemplate(IMG_NAMES.NEUROLOGICAL_SYSTEM);
        break;
    case 7:  //Respiratory System
        fnloadBodyTemplate(IMG_NAMES.RESPIRATORY_SYSTEM);
        break;
    case 8:  //Urogenital System examination
        fnloadBodyTemplate(IMG_NAMES.UROGENITAL_SYSTEM_EXAMINATION);
        break;

    case 9:  //Abdominal Examination
        fnloadBodyTemplate(IMG_NAMES.ABDOMINAL_EXAMINATION);
        break;
    case 10:  //Anal Examination
        fnloadBodyTemplate(IMG_NAMES.ANAL_EXAMINATION);
        break;
    case 11:  //Breast Examination
        fnloadBodyTemplate(IMG_NAMES.BREAST_EXAMINATION);
        break;
    case 12:  //Chest Examination
        fnloadBodyTemplate(IMG_NAMES.CHEST_EXAMINATION);
        break;
    case 13:  //Ear Examination
        fnloadBodyTemplate(IMG_NAMES.EAR_EXAMINATION);
        break;
    case 14:  //Eye Examination
        fnloadBodyTemplate(IMG_NAMES.EYE_EXAMINATION);
        break;
    case 15:  //Head Examination
        fnloadBodyTemplate(IMG_NAMES.HEAD_EXAMINATION);
        break;
    case 16:  //Joint Examination
        fnloadBodyTemplate(IMG_NAMES.JOINT_EXAMINATION);
        break;
    case 17:  //Mouth Examination
        fnloadBodyTemplate(IMG_NAMES.MOUTH_EXAMINATION);
        break;
    case 18:  //Nose Examination
        fnloadBodyTemplate(IMG_NAMES.NOSE_EXAMINATION);
        break;
    case 19:  //Systemic Examination
        fnloadBodyTemplate(IMG_NAMES.SYSTEMIC_EXAMINATION);
        break;
    case 20:  //Tongue Examination
        fnloadBodyTemplate(IMG_NAMES.TONGUE_EXAMINATION);
        break;

}

debugger;
//  ctx = document.getElementById('myCanvas').getContext("2d");
//   var background = new Image();
//   background.src = "../Content/Images/Head_Examination.jpg";  // This need to change as per Examination ID
// alert(background.src);



//document.getElementById("myCanvas").style.background = "url(Content/Images/Head_Examination.jpg)";

$('#myCanvas').mousedown(function (e) {
    //  alert(e);
    mousePressed = true;
    Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});

$('#myCanvas').mousemove(function (e) {
    if (mousePressed) {
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
    }
});

$('#myCanvas').mouseup(function (e) {
    mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
    mousePressed = false;
});

}

function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}

function clearArea(CE_id) {
// Use the identity matrix while clearing the canvas
//alert(CE_id);
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

switch (CE_id) {
    case 1:  //Cardiovascular System
        fnloadBodyTemplate(IMG_NAMES.CARDIOVASCULAR_SYSTEM);
        break;
    case 2:  //Female Reproductive System 1
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_1);
        break;
    case 3:  //Female Reproductive System 2
        fnloadBodyTemplate(IMG_NAMES.FEMALE_REPRODUCTIVE_SYSTEM_2);
        break;
    case 4:  //Gastrointestinal System
        fnloadBodyTemplate(IMG_NAMES.GASTROINTESTINAL_SYSTEM);
        break;
    case 5:  //Male Reproductive System
        fnloadBodyTemplate(IMG_NAMES.MALE_REPRODUCTIVE_SYSTEM);
        break;
    case 6:  //Neurological System
        fnloadBodyTemplate(IMG_NAMES.NEUROLOGICAL_SYSTEM);
        break;
    case 7:  //Respiratory System
        fnloadBodyTemplate(IMG_NAMES.RESPIRATORY_SYSTEM);
        break;
    case 8:  //Urogenital System examination
        fnloadBodyTemplate(IMG_NAMES.UROGENITAL_SYSTEM_EXAMINATION);
        break;

    case 9:  //Abdominal Examination
        fnloadBodyTemplate(IMG_NAMES.ABDOMINAL_EXAMINATION);
        break;
    case 10:  //Anal Examination
        fnloadBodyTemplate(IMG_NAMES.ANAL_EXAMINATION);
        break;
    case 11:  //Breast Examination
        fnloadBodyTemplate(IMG_NAMES.BREAST_EXAMINATION);
        break;
    case 12:  //Chest Examination
        fnloadBodyTemplate(IMG_NAMES.CHEST_EXAMINATION);
        break;
    case 13:  //Ear Examination
        fnloadBodyTemplate(IMG_NAMES.EAR_EXAMINATION);
        break;
    case 14:  //Eye Examination
        fnloadBodyTemplate(IMG_NAMES.EYE_EXAMINATION);
        break;
    case 15:  //Head Examination
        fnloadBodyTemplate(IMG_NAMES.HEAD_EXAMINATION);
        break;
    case 16:  //Joint Examination
        fnloadBodyTemplate(IMG_NAMES.JOINT_EXAMINATION);
        break;
    case 17:  //Mouth Examination
        fnloadBodyTemplate(IMG_NAMES.MOUTH_EXAMINATION);
        break;
    case 18:  //Nose Examination
        fnloadBodyTemplate(IMG_NAMES.NOSE_EXAMINATION);
        break;
    case 19:  //Systemic Examination
        fnloadBodyTemplate(IMG_NAMES.SYSTEMIC_EXAMINATION);
        break;
    case 20:  //Tongue Examination
        fnloadBodyTemplate(IMG_NAMES.TONGUE_EXAMINATION);
        break;

}

}

//-------------Button submit

//-------------

function fnAddNote1(vartext)
{
//http://jsfiddle.net/dval/Kz7VL/
//var texts = [];
// alert("Inside Submit Click");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// variables used to get mouse position on the canvas
var $canvas = $("#myCanvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// an array to hold text objects
var texts = [];

// this var will hold the index of the hit-selected text
var selectedText = -1;
// Make sure the image is loaded first otherwise nothing will draw.

// alert(vartext);

// get the text from the input element
var text =
    {
        text: vartext
        //x: 20,
        //y: y
    };

ctx.font = "16px verdana";
ctx.strokeStyle = $('#selColor').val();
text.width = ctx.measureText(vartext).width;
text.height = 16;
debugger;
ctx.fillText(text.text, 24, 45);

}

////////function init(txtNote)
////////{
//////// alert("New Canvas2 Inside Add Note");
//////// // alert("Inside Submit Click");
//////// var canvas1 = document.getElementById("canvas2");
//////// var ctx1 = canvas1.getContext("2d");

//////// // variables used to get mouse position on the canvas
//////// var $canvas1 = $("#canvas2");
//////// var canvasOffset = $canvas1.offset();
//////// var offsetX = canvasOffset.left;
//////// var offsetY = canvasOffset.top;
//////// var scrollX = $canvas1.scrollLeft();
//////// var scrollY = $canvas1.scrollTop();

//////// // variables to save last mouse position
//////// // used to see how far the user dragged the mouse
//////// // and then move the text by that distance
//////// var startX;
//////// var startY;

//////// // an array to hold text objects
//////// var texts = [];

//////// // this var will hold the index of the hit-selected text
//////// var selectedText = -1;
//////// // Make sure the image is loaded first otherwise nothing will draw.
//////// var vartext = txtNote;
//////// alert(vartext);

//////// //// get the text from the input element
//////// //var text =
//////// // {
//////// // text: vartext
//////// // //x: 20,
//////// // //y: y
//////// // };

//////// texts.push({
//////// text: vartext,
//////// x: 20,
//////// y: 20
//////// });

//////// //ctx1.font = "16px verdana";
//////// //text.width = ctx1.measureText(vartext).width;
//////// //text.height = 16;
//////// //alert($('#selColor').val());
//////// //ctx1.fillStyle = $('#selColor').val();
//////// //debugger;
//////// //ctx1.fillText(text.text, 20, 20);
//////// ctx1.font = "16px verdana";
//////// ctx1.fillStyle = $('#selColor').val();
//////// for (var i = 0; i < texts.length; i++) {
//////// var text = texts[i];
//////// text.width = ctx1.measureText(text.text).width;
//////// text.height = 16;
//////// }

//////// // this var will hold the index of the selected text
//////// var selectedText = -1;

//////// // START: draw all texts to the canvas
//////// //draw(texts);
//////// ctx1.clearRect(0, 0, canvas2.width, canvas2.height);
//////// for (var i = 0; i < texts.length; i++) {
//////// var text = texts[i];
//////// //alert(text.text);
//////// // alert(text.x);
//////// // alert(text.y);
//////// ctx1.fillText(text.text, text.x, text.y);
//////// }
//////// // listen for mouse events
//////// $("#canvas2").mousedown(function (e) {
//////// handleMouseDown(e);
//////// });
//////// $("#canvas2").mousemove(function (e) {
//////// handleMouseMove(e);
//////// });
//////// $("#canvas2").mouseup(function (e) {
//////// handleMouseUp(e);
//////// });
//////// $("#canvas2").mouseout(function (e) {
//////// handleMouseOut(e);
//////// });

//////// // handle mousedown events
//////// // iterate through texts[] and see if the user
//////// // mousedown'ed on one of them
//////// // If yes, set the selectedText to the index of that text
//////// function handleMouseDown(e) {
//////// e.preventDefault();
//////// startX = parseInt(e.clientX - offsetX);
//////// startY = parseInt(e.clientY - offsetY);

//////// // Put your mousedown stuff here
//////// for (var i = 0; i < texts.length; i++) {
//////// if (textHittest(startX, startY, i)) {
//////// selectedText = i;
//////// // alert(selectedText);
//////// }
//////// }
//////// }

//////// // done dragging
//////// function handleMouseUp(e) {
//////// e.preventDefault();
//////// selectedText = -1;
//////// }

//////// // also done dragging
//////// function handleMouseOut(e) {
//////// e.preventDefault();
//////// selectedText = -1;
//////// }

//////// // handle mousemove events
//////// // calc how far the mouse has been dragged since
//////// // the last mousemove event and move the selected text
//////// // by that distance
//////// function handleMouseMove(e)
//////// {
//////// // alert(selectedText);
//////// if (selectedText < 0) {
//////// return;
//////// }
//////// e.preventDefault();
//////// mouseX = parseInt(e.clientX - offsetX);
//////// mouseY = parseInt(e.clientY - offsetY);

//////// // Put your mousemove stuff here
//////// var dx = mouseX - startX;
//////// var dy = mouseY - startY;
//////// startX = mouseX;
//////// startY = mouseY;

//////// var text = texts[selectedText];
//////// text.x += dx;
//////// text.y += dy;
//////// //draw();
//////// ctx1.clearRect(0, 0, canvas2.width, canvas2.height);
//////// for (var i = 0; i < texts.length; i++) {
//////// var text = texts[i];
//////// // alert(text.text);
//////// // alert(text.x);
//////// // alert(text.y);
//////// ctx1.fillText(text.text, text.x, text.y);
//////// }
//////// }

//////// function textHittest(x, y, textIndex) {
//////// var text = texts[textIndex];
//////// return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
//////// }
////////}

function init()
{
// canvas related variables

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

// variables used to get mouse position on the canvas
var $canvas = $("#canvas2");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();

// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;

// an array to hold text objects
var texts = [];

// this var will hold the index of the hit-selected text
var selectedText = -1;

// clear the canvas & redraw all texts
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < texts.length; i++) {
        var text = texts[i];
        ctx.fillText(text.text, text.x, text.y);
    }
}


alert($("#theText").val());
// calc the y coordinate for this text on the canvas
    var y = texts.length * 20 + 20;

    // get the text from the input element
    var text = {
        text: $("#theText").val(),
        x: 20,
        y: y
    };

    // calc the size of this text for hit-testing purposes
    ctx.font = "16px verdana";
    alert($('#selColor').val())
    ctx.strokeStyle = $('#selColor').val();
    text.width = ctx.measureText(text.text).width;
    text.height = 16;

    // put this new text in the texts array
    texts.push(text);

    // redraw everything
    draw();

// test if x,y is inside the bounding box of texts[textIndex]
    function textHittest(x, y, textIndex) {
        var text = texts[textIndex];
        return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
    }

// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
    function handleMouseDown(e) {
        e.preventDefault();
        startX = parseInt(e.clientX - offsetX);
        startY = parseInt(e.clientY - offsetY);
        // Put your mousedown stuff here
        for (var i = 0; i < texts.length; i++) {
            if (textHittest(startX, startY, i)) {
                selectedText = i;
            }
        }
    }

// done dragging
    function handleMouseUp(e) {
        e.preventDefault();
        selectedText = -1;
    }

// also done dragging
    function handleMouseOut(e) {
        e.preventDefault();
        selectedText = -1;
    }

// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
    function handleMouseMove(e) {
        if (selectedText < 0) {
            return;
        }
        e.preventDefault();
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        // Put your mousemove stuff here
        var dx = mouseX - startX;
        var dy = mouseY - startY;
        startX = mouseX;
        startY = mouseY;

        var text = texts[selectedText];
        text.x += dx;
        text.y += dy;
        draw();
        //ctx.clearRect(0, 0, canvas.width, canvas.height);
        //for (var i = 0; i < texts.length; i++) {
        //    var text = texts[i];
        //    ctx.fillText(text.text, text.x, text.y);
        //}
    }

// listen for mouse events
    $("#canvas2").mousedown(function (e) {
        handleMouseDown(e);
    });
    $("#canvas2").mousemove(function (e) {
        handleMouseMove(e);
    });
    $("#canvas2").mouseup(function (e) {
        handleMouseUp(e);
    });
    $("#canvas2").mouseout(function (e) {
        handleMouseOut(e);
    });

}

[vrjgamer]

Hi @pritammalunjkar, I am not sure how this is related to my repository. Could explain me why you have posted this here?

[pritammalunjkar]

mistaken

…

On Tue, Sep 1, 2020 at 9:53 PM Vrushabh Jambhulkar ***@***.***> wrote: Hi @pritammalunjkar <https://github.com/pritammalunjkar>, I am not sure how this is related to my repository. Could explain me why you have posted this here? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALESSN2ZJTCVGDUHGLXCLBTSDUNWJANCNFSM4QRLD7OQ> .

-- *Thanks & Regards,* Pritam Malunjkar