How to place the text over the image (JS)

Question

I need to write my own meme generator and the problem is how to get text from the forms (top and bottom) and place it above the picture in canvas. I started to learn JS recently and know only basics. Some ideas/tips? Thanks

HTML fragment:

<div><label for="line-top">Top line</label><input type="text" id="line-top"></div>
<div><label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"></div>

I tried to code smth:

var top = document.getElementById("line-top").value;
var bottom = document.getElementById("line-bottom").value;

document.onload = function (){
  top = document.getElementById("line-top").value;
  bottom = document.getElementById("line-bottom").value;

  context.font = "45pt Impact";
  context.fillStyle = "white";
  context.strokeStyle = "2pt black";

  context.fillText(top, 10, 90);
  context.fillText(bottom, 100, 100);
};

but this doesn't work.

Answer 1

This can be done by stacking 2 canvases on each other.Draw your image on the canvas at the bottom(with lower zindex) and position your text on the upper canvas(with higher zindex).Simple huhh??...I have done the same in my case and works buttery smooth.Cheers :) Here is the sample code--->

<div><label for="line-top">Top line</label><input type="text" id="line-top" value="52"></div>
<div><label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"></div>


    <div style="position: relative;">
 <canvas id="canBottom" width="400" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="canUpper" width="400" height="400" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Javascript-->

var top = document.getElementById("line-top").value;
var bottom = document.getElementById("line-bottom").value;


var canbotom=document.getElementById('canBottom');
var ctxbottom=canbotom.getContext('2d');
var cantop=document.getElementById('canUpper');
var ctxtop=cantop.getContext('2d');
canbotom.style.zIndex=1;
cantop.style.zIndex=2;

ctxbottom.fillStyle="#FF0000";
ctxbottom.fillRect(0,0,400,400);


 ctxtop.clearRect(0, 0,400, 400);
    ctxtop.save();
    ctxtop.fillStyle = '#ADFF2F';
    ctxtop.font = "15px arial";
ctxtop.fillText(top,15,15);

Heres the working demo https://jsfiddle.net/mzeysom6/

Answer 2

You will probably need to look at the Z-index on these divs. This should allow the text lines to show above the image.

I haven't worked with it too much myself but you should read in to z-index a bit more...might help.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

i know you tagged with javascript, but why?

as i understand your question i would do with html/css:

<div class="wrp">
  <canvas></canvas>
  <div class="top">
    <label for="line-top">Top line</label><input type="text" id="line-top"/>
  </div>
  <div class="bottom">
    <label for="line-bottom">Bottom line</label><input type="text" id="line-bottom"/>
  </div>
</div>

and

.wrp {
  width: 200px;
  height: 200px;
  position: relative;
}
canvas {
  background: red; /* dummy image ;-) */
  width: 100%;
  height: 100%;
}
.wrp div {
  position: absolute;
}
.wrp .top {
  top: 0;
}
.wrp .bottom {
  bottom: 0;
}

the html can be set dynamically via javascript.