Fill moving bubbles with images and text from input form in html5 canvas

Question

I want to create a glass of beer with bubbles inside. The bubbles move around. When you click on any of the bubbles, it pops up a form to fill in your details, message and your picture. The message and picture filled then shows in the bubble. Anyone can click on the bubble and read your message and share it. I am able to create the bubbles and animations but not able to get it to fill with data from the form.

To create the bubbles;

    // Create some gradient
var gradient = ctx.createRadialGradient(105, 105, 20, 120, 120, 50);
gradient.addColorStop(0, 'rgba(250,250,255,0)');
gradient.addColorStop(0.75, 'rgba(230,250,255,1.0)');
gradient.addColorStop(1, 'rgba(0,0,255,0)');

// draw the gradient (note that we dont bother drawing a circle, this is more efficient and less work!)
// but make sure it covers the entire gradient
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);​

Answer 1

You say you're having trouble getting from text to draw on the canvas...

Here's an example that reads text input and uses context.fillText to draw the text on the canvas.

http://jsfiddle.net/m1erickson/4g63H/

Html

<input id="theText" type="text">
<button id="submit">Draw text on canvas</button><br>
<canvas id="canvas" width=300 height=300></canvas>

JavaScript

// canvas related variables
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

$("#submit").click(function () {

    var text = $("#theText").val()

    ctx.fillText(text, 20, 50);

});

Here's a link on how to use context.drawImage to draw an image on the canvas:

http://www.html5canvastutorials.com/tutorials/html5-canvas-images/