HTML Canvas Text use form to control text 2

Description

HTML Canvas Text use form to control text 2

View in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
 Your browser does not support HTML 5 Canvas. 
</canvas>// w w w. j  a  v a 2s . c  o  m

<form>
  Text: <input id="textBox" placeholder="your text" />
  <br> 
  
  Fill Or Stroke : 
  <select id="fillOrStroke">
  <option value="fill">fill</option>
  <option value="stroke">stroke</option>
  <option value="both">both</option>
  </select>
  <br>
 Text Font: <select id="textFont">
  <option value="serif">serif</option>
  <option value="sans-serif">sans-serif</option>
  <option value="cursive">cursive</option>
  <option value="fantasy">fantasy</option>
  <option value="monospace">monospace</option>
  </select>
 <br>  
 Text Size: <input type="range" id="textSize"
       min="0"
       max="200"
       step="1"
       value="50"/> 
 <br>      
 Text Color: <input class="color" id="textFillColor" value="FF0000"/> 
 <br>
 Font Weight:
 <select id="fontWeight">
 <option value="normal">normal</option>
 <option value="bold">bold</option>
 <option value="bolder">bolder</option>
 <option value="lighter">lighter</option>
 </select>
 <br>
 Font Style:
 <select id="fontStyle">
 <option value="normal">normal</option>
 <option value="italic">italic</option>
 <option value="oblique">oblique</option>
 </select>
 <br>
  Text Baseline <select id="textBaseline">
  <option value="middle">middle</option>
  <option value="top">top</option>
  <option value="hanging">hanging</option>
  <option value="alphabetic">alphabetic</option>
  <option value="ideographic">ideographic</option>
  <option value="bottom">bottom</option>
  </select>
  <br>
  Text Align <select id="textAlign">
  <option value="center">center</option>
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="left">left</option>
  <option value="right">right</option>
  
  </select>
 
  
</div>
<script type="text/javascript">

function canvasApp() {
  
  let message = "your text";
  let fillOrStroke ="fill";
  
  let fontSize = "50";
  let fontFace = "serif";
  let textFillColor ="#ff0000";
  let textBaseline = "middle";
  let textAlign = "center";
  let fontWeight ="normal";
  let fontStyle = "normal";

  let theCanvas = document.getElementById("canvasOne");
  let context = theCanvas.getContext("2d"); 
  
  let formElement = document.getElementById("textBox");
  formElement.addEventListener('keyup', textBoxChanged, false);  
  
  formElement = document.getElementById("fillOrStroke");
  formElement.addEventListener('change', fillOrStrokeChanged, false);  
  
  formElement = document.getElementById("textSize");
  formElement.addEventListener('change', textSizeChanged, false);  
  
  formElement = document.getElementById("textFillColor");
  formElement.addEventListener('change', textFillColorChanged, false);  
  
  formElement = document.getElementById("textFont");
  formElement.addEventListener('change', textFontChanged, false);  
  
  formElement = document.getElementById("textBaseline");
  formElement.addEventListener('change', textBaselineChanged, false);  
  
  formElement = document.getElementById("textAlign");
  formElement.addEventListener('change', textAlignChanged, false);  
  
  formElement = document.getElementById("fontWeight");
  formElement.addEventListener('change', fontWeightChanged, false);  
  
  formElement = document.getElementById("fontStyle");
  formElement.addEventListener('change', fontStyleChanged, false);  
  
  
  drawScreen();
  
  function drawScreen() {
    //Background
    
    context.fillStyle = "#ffffaa";
    context.fillRect(0, 0, theCanvas.width, theCanvas.height);
    //Box
    context.strokeStyle = "#000000"; 
    context.strokeRect(5,  5, theCanvas.width-10, theCanvas.height-10);
    
    
    //Text
    
    context.textBaseline = textBaseline;
    context.textAlign = textAlign;
    context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
    
    
    let xPosition = (theCanvas.width/2);
    let yPosition = (theCanvas.height/2);
    
    
    switch(fillOrStroke) {
      case "fill":
        context.fillStyle    = textFillColor;
            context.fillText  ( message,  xPosition ,yPosition);
        break;
      case "stroke":
        context.strokeStyle = textFillColor;
        context.strokeText  ( message, xPosition,yPosition);
        break;
      case "both":
        context.fillStyle    = textFillColor;
            context.fillText  ( message,  xPosition ,yPosition);
        context.strokeStyle = "#000000";
        context.strokeText  ( message, xPosition,yPosition);
        break;    
    }
    
        
  }
  
  function textBoxChanged(e) {
    let target =  e.target;
    message = target.value;
    drawScreen();
  }
  
  function fillOrStrokeChanged(e) {
    let target =  e.target;
    fillOrStroke =  target.value;
    drawScreen();
  }
  
  function textSizeChanged(e) {
    let target =  e.target;
    fontSize = target.value;
    drawScreen();
  }
  
  function textFillColorChanged(e) {
    let target =  e.target;
    textFillColor = "#" + target.value;
    drawScreen();
  }
  
  function textFontChanged(e) {
    let target =  e.target;
    fontFace =  target.value;
    drawScreen();
  }
  
  function textBaselineChanged(e) {
    let target =  e.target;
    textBaseline =  target.value;
    drawScreen();
  }
  
  function textAlignChanged(e) {
    let target =  e.target;
    textAlign =  target.value;
    drawScreen();
  }
  
  function fontWeightChanged(e) {
    let target =  e.target;
    fontWeight =  target.value;
    drawScreen();
  }
  
  function fontStyleChanged(e) {
    let target =  e.target;
    fontStyle =  target.value;
    drawScreen();
  }
  
  
  
}
canvasApp() ;
</script> 

</body>
</html>



PreviousNext

Related