html5 canvas, using html elements and css

Question

I am trying to make a game using the HTML5 canvas. As I understand it, I create a canvas element in html and modify it using javascript.

What about if I want for example to create a text input field inside the canvas. So if at one point during the game the player must enter his name, it would be nice to be able to use a html element <input="text" etc... and style it with css.

How can this be achieved considering all the code is done in javascript?

Thanks

Html5 Canvas has no native text input capability, but you can always use css to (1) temporarily place a input-text-element over the canvas, (2) have user enter text (3) get the text value (user's name) and (4) remove the temporary input-text-element. — markE, May 14 '14 at 18:46
possible duplicate of [I am trying to edit text on canvas](http://stackoverflow.com/questions/21011931/i-am-trying-to-edit-text-on-canvas) — , May 15 '14 at 00:23

markE · Accepted Answer · 2014-05-14T20:10:34.983

Here's one way to do it:

A Demo: http://jsfiddle.net/m1erickson/9f2ct/

Html5 Canvas has no native text input capability, but you can always use css to

Temporarily place a input-text-element over the canvas,
Have user enter their name and press a submit button,
Get the text value (user's name),
Hide the temporary input-text-element

Before and After clicking the "Personal Info" icon:

enter image description here

Html

<div id="wrapper">
    <canvas id="canvas" width=300 height=300></canvas>
    <div id="myname">
        <input type="text" id="name" size=15>
        <button id="submitName">OK</button>
    </div>
</div>

CSS

#wrapper{
    position:relative;
}
#canvas{
    position:absolute;
    border:1px solid red;
}
#myname{ 
    position:absolute;
    left:28px;top:3px;
    visibility:hidden;
}

Javascript

// canvas related variables
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;


// name input related variables
$myname=$("#myname");
var playerName="";

// load a person icon and display it top-left
var img=new Image();
img.onload=start;
img.src="personIcon.png";
function start(){
    ctx.drawImage(img,0,0);
}


// listen for mousedown events
function handleMouseDown(e){

  // tell the browser we'll handle this event
  e.preventDefault();
  e.stopPropagation();

  // get the mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // if the mouse was pressed over the person icon
  // then make the name-input visible
  if(mouseX<img.width && mouseY<img.height){
      $("#name").text(playerName);
      $myname.css("visibility","visible");
  }

}

// listen for mousedown events
$("#canvas").mousedown(function(e){handleMouseDown(e);});

// listen for clicks on the OK button
// if clicked, save the player's name
// and hide the name-input
$("#submitName").click(function(){
    playerName=$("#name").val();
    $myname.css("visibility","hidden");
});

Hamza Alayed · Answer 2 · 2014-05-14T20:08:08.780

Check This link for more details.
Script in github
And JSFiddle

      <canvas id="canvas" width="350" height="50"></canvas>
<script>
    var input = new CanvasInput(
    {  
    canvas: document.getElementById('canvas'),  
    fontSize: 18,  
    fontFamily: 'Arial',  
    fontColor: '#212121',  
    fontWeight: 'bold',  
    width: 300,  
    padding: 8,  
    borderWidth: 1,  
    borderColor: '#000',  
    borderRadius: 3,  
    boxShadow: '1px 1px 0px #fff',  
    innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',  
    placeHolder: 'Enter message here...'}

);
</script>

html5 canvas, using html elements and css

2 Answers2