html5 canvas input,javascript - HTML5 Canvas Image Draw with input text - Stack Overflow

I am new to Canvas and I have a task where I have an input box to input a text. then I upload an image.When the image is displayed, it should have the text repeated in the background.

So far I have been able to upload the image and slightly grey scale it, but I do not know how to to use the text to be repeate din the background

It would be great if someone could point me in the direction of what to do next.-Thanks

my code so far:

document.addEventListener('DOMContentLoaded', function(){

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var source = document.getElementById('fileupload');

source.addEventListener('change',handleImage,false);

function handleImage(e){

var reader = new FileReader();

reader.onload = function(event){

var img = new Image();

img.onload = function(){

context.drawImage(img,0,0);

grayScale(context, canvas);

}

img.src = event.target.result;

}

reader.readAsDataURL(e.target.files[0]);

}

function grayScale(context, canvas) {

var imgData = context.getImageData(0, 0, canvas.width, canvas.height);

var pixels = imgData.data;

for (var i = 0, n = pixels.length; i < n; i += 4) {

pixels[i]+=20;

var grayscale = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;

pixels[i*4 ] = grayscale; // red

pixels[i*4+1] = grayscale+30; // green

pixels[i*4+2] = grayscale; // blue

// pixels[i+3] = 0.5; // is alpha

}

//redraw the image in black & white

context.putImageData(imgData, 0, 0);

}

})

Background

Select file: