My website features an HTML5 canvas where I showcase a variety of images, text, and shapes using JavaScript functions.
The text and shapes are created with the following JavaScript functions:
function drawGameElements(){
/* Draw a line for the 'score bar'. */
context.moveTo(0, 25);
context.lineTo(1000, 25);
context.stroke();
/* Display current level/ total levels on the left, and current score on the right. */
context.font = "11pt Calibri";
context.strokeStyle = "black";
context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
context.strokeText(currentScore, 950, 15);
}
and
function drawDescriptionBoxes(){
CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
if(typeof stroke == "undefined" ){
stroke = true;
}
if(typeof radius === "undefined"){
radius = 5;
}
//More code here
}
context.drawDescriptionArea(70, 400, 120, 70);
context.font = '25pt Calibri';
context.strokeText('Asset', 90, 440);
// More description boxes drawn here
}
The images are loaded from their sources into an HTML hidden section first, and then loaded into a JavaScript array named 'sources':
function loadImages(sources, callback){
//Code snippet
}
Following that, I utilize another JavaScript function to draw those images onto the canvas:
function drawImage(imageObj) {
// Code snippet
}
While everything initially displays correctly on the canvas, when attempting to drag and drop an image, the other elements disappear. This might be due to the KineticJS library clearing the canvas entirely while redrawing the images.
I'm seeking guidance on how to retain the text and shapes drawn on the canvas while dragging and dropping the images, or ensuring they get redrawn alongside the images during this action?