Lesson 2
Three little words with text...
You may have noticed that we've created two Javascript functions in Lesson 1, init and draw. The first is the "initial" or beginning function - it contains all the code to start drawing the eCard. The second function defines what to draw in the <canvas> element. Let's add some code to write a message in the canvas.
We'll put our message in a variable. Think of a variable as a bucket - it can hold something and move it around our code, we can look into the bucket to see what's in it, and it doesn't change unless we add to it or take out.
Add this line before the init() function to create the variable myMessage to hold our message.
var myMessage = "Happy Valentine's Day";
Next, in the draw() function add these lines at the end:
context.font = "40px Times New Roman";
context.fillStyle = "rgba(255,30,30,0)";
context.textAlign = "center";
context.fillText(myMessage, 300, 200);
:eyes: (:warning: Remember to refresh!) That's starting to look more like a Valentine's card, but it's not gonna win any hearts. Let's add a little more pizzaz and make the message wait before it appears.
:cherries: Change the message's font, color, and size. Hints: - px --> pixels, - rgba --> Red, Green, Blue, Alpha("see-through").
:cherries: :cherries: Bonus: change the position to the top right.
As we did with myMessage, we'll add a new variable called counter and have the <canvas> use it to decide when to write the message. Let's have the message display after counter is greater than 100:
var myMessage = "Happy Valentine's Day";
var counter = 0;
function init() {
var canvas = document.getElementById("greetings");
if (canvas.getContext){
var context = canvas.getContext('2d');
setInterval(function() {draw(context)}, 10);
} else {
// canvas-unsupported code here
alert("Sorry, I can't display the card");
}
}
function draw(context) {
var lingrad = context.createLinearGradient(0,0,0,400);
lingrad.addColorStop(0, '#f57a86');
lingrad.addColorStop(1, '#ffffff');
context.fillStyle = lingrad;
context.fillRect (0, 0, 600, 400);
// Write our message
counter = counter + 1;
if (counter > 100) {
context.font = "40px Times New Roman";
context.fillStyle = "rgba(255,30,30,0)";
context.textAlign = "center";
context.fillText(myMessage, 300, 200);
}
}
$(document).ready(function() {
init();
});
The one thing that may throw you for a loop is the setInterval() call in the init() function. For every open window in a browser, you can have a Javascript function run every X milliseconds using setInterval(). For more information, Google it. I dare you.
:eyes: Huh... not really giving us that 'love vibe' with our message popping up out of nowhere. It has a desperate, clingy, "Love-me-NOW!!!" feel to it. Let's soften that up by having the message fade in...
var myMessage = "Happy Valentine's Day";
var counter = 0;
var alpha = 0;
function init() {
var canvas = document.getElementById("greetings");
if (canvas.getContext){
var context = canvas.getContext('2d');
setInterval(function() {draw(context)}, 10);
} else {
// canvas-unsupported code here
alert("Sorry, I can't display the card");
}
}
function draw(context) {
var lingrad = context.createLinearGradient(0,0,0,400);
lingrad.addColorStop(0, '#f57a86');
lingrad.addColorStop(1, '#ffffff');
context.fillStyle = lingrad;
context.fillRect (0, 0, 600, 400);
// Write our message
counter = counter + 1;
if (counter > 100) {
if (alpha < 100) alpha = alpha + 1;
opacity = alpha / 100;
context.font = "40px Times New Roman";
context.fillStyle = "rgba(255,30,30," + opacity + "0)";
context.textAlign = "center";
context.fillText(myMessage, 300, 200);
}
}
$(document).ready(function() {
init();
});
:eyes: Aw, that's smooth. Barry White would be proud...
Now that we've set the mood, we'll add some sizzle in Lesson 3.