CODEWITHSUNDEEP
javascripthtmlcanvas
CSRadical
CSRadical

Reputation: 113

HTML5 Canvas - Font Style with an Element

I was wondering if it's possible to take an element submitted by the user and adapt that choice to the font when creating text into an HTML5 canvas.

Essentially I'm making a Create Your Own Greeting Card page where one of the options the user has is to choose between four different fonts.

Here's one of the radio buttons as an example (HTML):

<input type="radio" id="font" name="font" value="arial" /><font face="Arial">Arial</font>

And then here's the block of code I'm trying to set the font with (Javascript):

var recipient = document.card.recipient.value;
var giver = document.card.giver.value;
var occasion = document.card.occasion.value;
var font = document.card.font.value;

var imageObj = new Image();

if (occasion = 'birthday') {
    context.font = font;
    context.fillStyle = 'black';
    context.fillText('Happy Birthday, ' + recipient + '!', 10, 25); 
    imageObj.onload = function() {
        context.drawImage(imageObj, 50, 125);
    };
    imageObj.src = 'images/birthday.png';       
}

I'm not sure if it's that I'm doing something wrong or if it's something that just isn't possible. I've tried Google searching a way to do this and haven't found one yet.

Thanks for any and all help, guys!

Upvotes: 1

Views: 1714

Answers (2)

HJ05
HJ05

Reputation: 1368

Others have already pointed out mistakes within your code so I'm just going to answer the question.

Here is a working Fiddle

For the basic HTML I used a form to keep things simple:

<form name="myForm">
    <label><input type="text" name="myText" /> Text To Show</label>
    <label><input type="radio" name="font" value="Arial" checked /><span style="font-family: arial;">Arial</span></label>
    <label><input type="radio" name="font" value="Courier New" /><span style="font-family: Courier New;">Courier New</span></label>
</form>

<canvas id="myCanvas" width="300" height="300"></canvas>

This gives the option for user submitted text string and only two different fonts.

And here is JavaScript code to attach events to the radio buttons and text field:

var radios = document.myForm.font,
    cvs = document.getElementById('myCanvas'),
    ctx = cvs.getContext('2d');

for (var i = 0; i < radios.length; i++) {
    radios[i].addEventListener('click', function() {
        ctx.clearRect(0, 0, 300, 300);
        ctx.font = '16pt ' + document.querySelector('input[name="font"]:checked').value;
        ctx.fillText(document.myForm.myText.value, 20, 20);
    });
}

document.myForm.myText.addEventListener('input', function() {
    ctx.clearRect(0, 0, 300, 300);
    ctx.font = '16pt ' + document.querySelector('input[name="font"]:checked').value;
    ctx.fillText(document.myForm.myText.value, 20, 20);
});

Also, since the code in both event listeners is the same you could refactor it out into it's own function instead of repeating it.

Also, here is a link to the MDN article on canvas fonts: https://developer.mozilla.org/en-US/docs/Drawing_text_using_a_canvas

Upvotes: 0

WebWanderer
WebWanderer

Reputation: 10897

First of all, your using the wrong operator in your if statement. It should be:

if(occasion === 'birthday')

But that could've just been a simple type-o.

Other than that, what you are trying to do is ABSOLUTELY POSSIBLE! I've done similar things in the past, and must I say, your project sounds pretty cool.

The issue that you may be having is the syntax of your "font". In order to set a font to the context of a canvas, you need to meet three parameters: font-variant; font-size; and font-family.

An example would be: "normal 12px Arial"

If you leave the font-variant out, it will default to "normal". For example, you could use: "12px Arial" to achieve the same thing

You must provide the font-size and the font-family in order to set the font, otherwise, it will ignore the command, and I've had this issue in the past.

I would suggest setting a variable to the default font-size, and setting another selection on your page for the font-size of the element that you want. If the user doesn't pick the font-size yet, just attach the value of your default font-size to the font string and use that.

var fontSize = document.card.fontSize.value;

var defaultFontSize = 12;

if(!fontSize)
   fontSize = defaultFontSize;

...

context.font = fontSize + 'px ' + font;

And that should do it!

Google "canvas reference", and click on the link HTML Canvas Reference - W3Schools.

Upvotes: 1

Related Questions