html5 Canvas在画布中显示默认区域

Question

I would like to display default my "Dedication Text" in the middle of my canvas. I really can't determine the coordinates nor understand the codes...

Currently my Dedication Text displays here :

As you can see, it displays on the left top corner of the canvas.

Where I would like to automatically display is in the middle Like this:

I have this code that I got from net:

  function updateTotal() { if (document.getElementById('design3').checked) { var canvas2 = document.getElementById("displaycake_text"); context = canvas2.getContext("2d"); var $canvas2 = $("#displaycake_text"); 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(); } $("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events $("#displaycake_text").mousemove(function (d) { handleMouseMove(d); }); $("#displaycake_text").mouseup(function (d) { handleMouseUp(d); }); $("#displaycake_text").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> <canvas id="displaycake_text" height="300px" width="600px"> </canvas> <!-- CLICK THE RADIO TO TRIGGER POST --> <input type="radio" id="design3" name="design_3" onchange="updateTotal()" /> Dedication <h2> <div class="disp_dedi off"> <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()"> 

As you can see, I can drag it around... But I'm going to add some features that would decline the dragging part.

Can anyone help me point out which in the JS code that I could set the place of the text to be posted by default somewhere in the middle? The source doesn't have enough comments for me to understand.

THANK YOU IN ADVANCE!!!

Answer 1

First you need to align the text that you are trying to draw on the canvas by using textAlign property of canvas.
Second you need to set the fillText 's x , y coordinates according to half of the canvas width / height, so that you can place the text in the middle of the canvas. So, basically you have to add / change just 2 lines of code in your already existing snippet and that would be :

context.textAlign = 'center';
context.fillText(text.text, canvas2.width / 2, canvas2.height / 2);

and the good thing is it automatically removes the dragging part.

 function updateTotal() { if (document.getElementById('design3').checked) { var canvas2 = document.getElementById("displaycake_text"); context = canvas2.getContext("2d"); var $canvas2 = $("#displaycake_text"); 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.textAlign = 'center'; context.fillText(text.text, canvas2.width / 2, canvas2.height / 2); } } 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(); } $("#displaycake_text").mousedown(function(d) { handleMouseDown(d); }); // listen for mouse events $("#displaycake_text").mousemove(function(d) { handleMouseMove(d); }); $("#displaycake_text").mouseup(function(d) { handleMouseUp(d); }); $("#displaycake_text").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); } } 

 #displaycake_text { background-color: lightgrey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="displaycake_text" height="300px" width="600px"> </canvas> <!-- CLICK THE RADIO TO TRIGGER POST --> <input type="radio" id="design3" name="design_3" onchange="updateTotal()" /> Dedication <h2> <div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <button id="text_dedi"> Post </button> <input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()">