HTML Canvas Text use form to control text 3

Description

HTML Canvas Text use form to control text 3

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>/*from  w  ww .ja v  a2  s . co m*/
<form>
  Text: <input id="textBox" placeholder="your text" />
  <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>
  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 Size: <input type="range" id="textSize"
       min="0"
       max="200"
       step="1"
       value="50"/> 
  <br>
  
  Fill Type : <select id="fillType">
  <option value="colorFill">Color Fill</option>
  <option value="linearGradient">Linear Gradient</option>
  <option value="radialGradient">Radial Gradient</option>
  <option value="pattern">pattern</option>
  </select>
  <br>
  Text Color: <input class="color" id="textFillColor" value="FF0000"/> 
  <br>
  Text Color 2: <input class="color" id="textFillColor2" value ="000000"/> 
  <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 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>
  <br>
 Alpha : <input type="range" id="textAlpha"
       min="0.0"
       max="1.0"
       step="0.01"
       value="1.0"/>
 <br>      
 Shadow X:<input type="range" id="shadowX"
       min="-100"
       max="100"
       step="1"
       value="1"/>
<br>
Shadow Y:<input type="range" id="shadowY"
       min="-100"
       max="100"
       step="1"
       value="1"/>
  <br>
Shadow Blur: <input type="range" id="shadowBlur"
       min="1"
       max="100"
       step="1"
       value="1" /> 
<br>
Shadow Color: <input class="color" id="shadowColor" value="707070"/> 
  <br>
  
 Canvas Width:  <input type="range" id="canvasWidth"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>      
  
  Canvas Height:
  <input type="range" id="canvasHeight"
       min="0"
       max="1000"
       step="1"
       value="300"/>
  <br>
  
  Canvas Style Width:  <input type="range" id="canvasStyleWidth"
       min="0"
       max="1000"
       step="1"
       value="500"/>
 <br>      
  
  Canvas Style Height:
  <input type="range" id="canvasStyleHeight"
       min="0"
       max="1000"
       step="1"
       value="300"/>
  <br>      
  
 <input type="button" id="createImageData" value="Create Image Data">
 <br>
 
 <br>
 <textarea id="imageDataDisplay" rows=10 cols=30></textarea>
 </form>
    
</div>
<script type="text/javascript">

function eventWindowLoaded() {
  let patternPreload = new Image();
  patternPreload.onload = eventAssetsLoaded;
  patternPreload.src = "texture.jpg";
}

function canvasApp() {
  
  let message = "your text";
  let fontSize = "50";
  let fontFace = "serif";
  let textFillColor ="#ff0000";
  let textAlpha =1;
  let shadowX = 1;
  let shadowY = 1;
  let shadowBlur = 1;
  let shadowColor = "#707070";
  let textBaseline = "middle";
  let textAlign = "center";
  let fillOrStroke ="fill";
  let fontWeight ="normal";
  let fontStyle = "normal";
  let fillType = "colorFill";
  let textFillColor2 ="#000000";
  let pattern = new Image();
  
  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);  
  
  formElement = document.getElementById("shadowX");
  formElement.addEventListener("change", shadowXChanged, false);  
  
  formElement = document.getElementById("shadowY");
  formElement.addEventListener("change", shadowYChanged, false);  
  
  formElement = document.getElementById("shadowBlur");
  formElement.addEventListener("change", shadowBlurChanged, false);  
  
  formElement = document.getElementById("shadowColor");
  formElement.addEventListener("change", shadowColorChanged, false);  
  
  formElement = document.getElementById("textAlpha");
  formElement.addEventListener("change", textAlphaChanged, false);  
  
  formElement = document.getElementById("textFillColor2");
  formElement.addEventListener("change", textFillColor2Changed, false);  
  
  formElement = document.getElementById("fillType");
  formElement.addEventListener("change", fillTypeChanged, false);  
  
  formElement = document.getElementById("canvasWidth");
  formElement.addEventListener("change", canvasWidthChanged, false);  
  
  formElement = document.getElementById("canvasHeight");
  formElement.addEventListener("change", canvasHeightChanged, false);
  
  formElement = document.getElementById("canvasStyleWidth");
  formElement.addEventListener("change", canvasStyleSizeChanged, false);  
  
  formElement = document.getElementById("canvasStyleHeight");
  formElement.addEventListener("change", canvasStyleSizeChanged, false);
  
  formElement = document.getElementById("createImageData");
  formElement.addEventListener("click", createImageDataPressed, false);    
  
  pattern.src = "image1.png";
  
  drawScreen();
  
  function drawScreen() {
    //Background
    
    context.globalAlpha = 1;
    context.shadowColor = "#707070";
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.shadowBlur = 0;
    
    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;
    
    
    context.shadowColor =shadowColor;
    context.shadowOffsetX = shadowX;
    context.shadowOffsetY = shadowY;
    context.shadowBlur = shadowBlur;
    
    context.globalAlpha = textAlpha;
    
      
    let xPosition = (theCanvas.width/2);
    let yPosition = (theCanvas.height/2);
    
    let metrics = context.measureText(message);
    let textWidth = metrics.width;
    
    let tempColor;
    if (fillType == "colorFill") {
      tempColor = textFillColor;
    } else if (fillType == "linearGradient") {
      
      let gradient = context.createLinearGradient(xPosition-textWidth/2, yPosition, textWidth, yPosition);
      gradient.addColorStop(0,textFillColor);
      gradient.addColorStop(.6,textFillColor2);
      tempColor = gradient;
    } else if (fillType == "radialGradient") {
      let gradient = context.createRadialGradient(xPosition, yPosition, fontSize, xPosition+textWidth, yPosition, 1);
      gradient.addColorStop(0,textFillColor);
      gradient.addColorStop(.6,textFillColor2);
      tempColor = gradient;
    } else if (fillType == "pattern") {
      let tempColor = context.createPattern(pattern,"repeat")
    } else {
      tempColor = textFillColor;
    }
    
    
    switch(fillOrStroke) {
      case "fill":
        context.fillStyle    = tempColor;
            context.fillText  ( message,  xPosition ,yPosition);
        break;
      case "stroke":
        context.strokeStyle = tempColor;
        context.strokeText  ( message, xPosition,yPosition);
        break;
      case "both":
        context.fillStyle    = tempColor;
            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 textBaselineChanged(e) {
    let target =  e.target;
    textBaseline =  target.value;
    drawScreen();
  }
  
  function textAlignChanged(e) {
    let target =  e.target;
    textAlign =  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 fontWeightChanged(e) {
    let target =  e.target;
    fontWeight =  target.value;
    drawScreen();
  }
  
  function fontStyleChanged(e) {
    let target =  e.target;
    fontStyle =  target.value;
    drawScreen();
  }
  
  function shadowXChanged(e) {
    let target =  e.target;
    shadowX =  target.value;
    drawScreen();
  }
  
  function shadowYChanged(e) {
    let target =  e.target;
    shadowY =  target.value;
    drawScreen();
  }
  
  function shadowBlurChanged(e) {
    let target =  e.target;
    shadowBlur =  target.value;
    drawScreen();
  }
  
  function shadowColorChanged(e) {
    let target =  e.target;
    shadowColor =  target.value;
    drawScreen();
  }
  
  function textAlphaChanged(e) {
    let target =  e.target;
    textAlpha =  (target.value);
    drawScreen();
  }
  
  function textFillColor2Changed(e) {
    let target =  e.target;
    textFillColor2 = "#" + target.value;
    drawScreen();
  }
  
  function fillTypeChanged(e) {
    let target =  e.target;
    fillType =  target.value;
    drawScreen();
  }
  
  function canvasWidthChanged(e) {
    let target =  e.target;
    theCanvas.width =  target.value;
    drawScreen();
  }
  
  function canvasHeightChanged(e) {
    let target =  e.target;
    theCanvas.height =  target.value;
    drawScreen();
  }
  
  function canvasStyleSizeChanged(e) {
    
    let styleWidth  = document.getElementById("canvasStyleWidth");
    let styleHeight  = document.getElementById("canvasStyleHeight");
    let styleValue = "width:" + styleWidth.value + "px; height:" + styleHeight.value +"px;";
    theCanvas.setAttribute("style", styleValue );
    drawScreen();
  }
  
  
  
  function createImageDataPressed(e) {
    
    let imageDataDisplay = document.getElementById("imageDataDisplay");
    imageDataDisplay.value = theCanvas.toDataURL();
    window.open(imageDataDisplay.value,"canavsImage","left=0,top=0,width=" + theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0");
    
  }
  
    
}

canvasApp();

</script> 


</body>
</html>



PreviousNext

Related