Issue when trying to change font size and color in canvas

Question

I'm trying to change my font size and color in my canvas on a photo. So you have to upload a photo before you're able to add text to the image. After you add the photo and add text, then you're able to change the color and font, but when trying to do so you have to re-submit or the changes are not applied. Any ideas on what is happening? Do I have to re-draw it when they change colors or font sizes? Thanks In advance.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="theText" type="text">
<button id="submit">Draw text on canvas</button>
<br>



<canvas id="canvas" width="1000" height="500" class="playable-canvas"></canvas>


<div id="image_div">
  <h1> Choose an Image to Upload </h1>
  <input type='file' name='img' id='uploadimage' />

</div>



<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.filter = 'blur(0px)';
</textarea>





<!-- Change Font Size --> 

<div class="radio">
  <input type="radio" name="radio" id="size16" onclick="size16()" checked="">
  <label for="size16"> Font Size 16  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size20" onclick="size20()" >
  <label for="size20"> Font Size 20  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="size25" onclick="size25()" >
  <label for="size25"> Font Size 25  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"id="size30" onclick="size30()" >
  <label for="size30"> Font Size 30</label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size35" onclick="size35()" >
  <label for="size35"> Font Size 35 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size40" onclick="size40()" >
  <label for="size40"> Font Size 40 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size45" onclick="siz45()" >
  <label for="size45"> Font Size 45 </label>
</div>
<div class="radio">
  <input type="radio" name="radio" id="size50" onclick="size50()" >
  <label for="size50"> Font Size 50 </label>
</div>

<Br> 

<!-- Change Color on Text --> 


<div class="col-lg-2 col-md-2 col-xs-12">

<div class="radio">
  <input type="radio" name="radio"  id="black" onclick="BlackText()" checked="">
  <label for="radio1"> Black  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="white" onclick="WhiteText()"  >
  <label for="radio1"> White  </label>
</div>
<div class="radio">
  <input type="radio" name="radio"  id="yellow" onclick="YellowText()"  >
  <label for="radio1"> Yellow  </label>
</div>
<div class="radio radio-primary">
  <input type="radio" name="radio" id="blue" onclick="BlueText()" >
  <label for="radio3"> Blue </label>
</div>
<div class="radio radio-success">
  <input type="radio" name="radio" id="green" onclick="GreenText()" >
  <label for="radio4"> Green </label>
</div>
<div class="radio radio-danger">
  <input type="radio" name="radio"id="red" onclick="RedText()"  >
  <label for="radio6"> Red </label>
</div>
<div class="radio radio-warning">
  <input type="radio" name="radio" id="orange" onclick="OrangeText()"  >
  <label for="radio7"> Orange </label>
</div>
<div class="radio radio-purple">
  <input type="radio" name="radio"id="purple" onclick="PurpleText()"  >
  <label for="radio8"> Purple </label>
</div>
</div>

Javscript:

//===========================================================================================================================
// Javascript that loads Image into canvas
//===========================================================================================================================


var drawnImage;

function drawImage(ev) {
  console.log(ev);
  var ctx = document.getElementById('canvas').getContext('2d'),
    img = new Image(),
    f = document.getElementById("uploadimage").files[0],
    url = window.URL || window.webkitURL,
    src = url.createObjectURL(f);
  img.src = src;
  img.onload = function() {
    drawnImage = img;
    ctx.drawImage(img, 0, 0);
    url.revokeObjectURL(src);
  }
}
document.getElementById("uploadimage").addEventListener("change", drawImage, false);

//===========================================================================================================================
// Javascript for input in textbox
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
  drawImage();
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

//===========================================================================================================================
// Javascript for Moving Text around.
//===========================================================================================================================

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var startX;
var startY;
var texts = [];
var selectedText = -1;

function draw() {
  ctx.rect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
//    ctx.fillStyle = "blue";
    ctx.fillText(text.text, text.x, text.y);
  }
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(drawnImage, 0, 0);
  draw();
}

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 handleMouseDown(e) {
  e.preventDefault();
  startX = parseInt(e.clientX - offsetX);
  startY = parseInt(e.clientY - offsetY);

  for (var i = 0; i < texts.length; i++) {
    if (textHittest(startX, startY, i)) {
      selectedText = i;
    }
  }
}
function handleMouseUp(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseOut(e) {
  e.preventDefault();
  selectedText = -1;
}

function handleMouseMove(e) {
  if (selectedText < 0) {
    return;
  }
  e.preventDefault();
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  var dx = mouseX - startX;
  var dy = mouseY - startY;
  startX = mouseX;
  startY = mouseY;
  var text = texts[selectedText];
  text.x += dx;
  text.y += dy;
  redraw();
}
$("#canvas").mousedown(function(e) {
  handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
  handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
  handleMouseUp(e);
});
$("#canvas").mouseout(function(e) {
  handleMouseOut(e);
});

$("#submit").click(function() {
  var y = texts.length * 20 + 20;
  var text = {
    text: $("#theText").val(),
    x: 20,
    y: y
  };
//  ctx.font = "16px verdana";
  text.width = ctx.measureText(text.text).width;
  text.height = 16;
  texts.push(text);
  draw();
});
//===========================================================================================================================
// Javascript for Text Size :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function size16 () {
    ctx.font = "16px verdana";
}
function size20 () {
    ctx.font = "20px verdana";
}
function size25 () {
    ctx.font = "25px verdana";
}
function size30 () {
    ctx.font = "30px verdana";
}
function size35 () {
    ctx.font = "35px verdana";
}
function size40 () {
    ctx.font = "40px verdana";
}
function size45 () {
    ctx.font = "45px verdana";
}
function size50 () {
    ctx.font = "50px verdana";
}




//===========================================================================================================================
// Javascript for Drop down for Text Color :)
//===========================================================================================================================

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function PurpleText () {
    ctx.fillStyle= 'purple';
}
function BlackText () {
    ctx.fillStyle= 'black';
}
function YellowText () {
    ctx.fillStyle= 'yellow';
}
function OrangeText () {
 ctx.fillStyle = "orange";
}
function BlueText () {
    ctx.fillStyle= 'blue';
}
function WhiteText () {
 ctx.fillStyle = "white";
}

 function GreenText () {
     ctx.fillStyle= 'green';
 }
 function RedText () {
  ctx.fillStyle = "red";
 }

Answer 1

您必须每xxx毫秒重新绘制一次Canvan，或连续绘制（刷新）它。