Unable to Display Text on Canvas Using JavaScript

Question

So, we have a project where we have to code for a game of craps. I'm having trouble getting the roll numbers to display in the canvases. I have most of the actual script in order, but printing it on the canvas is what's getting me. What's going wrong? Here is the code:

<!DOCTYPE html> 
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="mystyle.css">

<title>Game of Craps</title>
<script>
var roll1 = 0;
var roll2 = 0;
var lose = 0;
var win = 0;
var sumOfDice = 0;
var i = 0;

function rollDice(){
    var roll1 = Math.floor(Math.random()*6)+1;
    var roll2 = Math.floor(Math.random()*6)+1; 
    sumOfDice = roll1 + roll2;
    return sumOfDice;
}
function play(){
    while (i < numOfGames){
        rollDice()
        i++
    }

    sumOfDice = rollDice()


    switch (sumOfDice) {
        case 7: case 11:
            win++;
            break;
        case 2: case 3: case 12:
            lose++;
            break;
        default:
            var point = sumOfDice;
            sumOfDice = rollDice();

            while (point != sumOfDice){
                if (sumOfDice == 7){
                    lose++;
                    break;
                }
                rollDice();
                sumOfDice = roll1+roll2;
                }

            if (point == sumOfDice) {
                win++;
            }
            break;

    }
}

function print(){
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "maroon";
    ctx.fillRect(300, 175, 200, 200);
    ctx.fillText(roll1, 350, 300)
    ctx.fillStyle = "black";

    var d = document.getElementById("canvas");
    var ctx = d.getContext("2d");
    ctx.fillStyle = "maroon";
    ctx.fillRect(20, 175, 200, 200); 

}
</script>
</head>
<body>

<h1>My Game of Craps</h1>

<fieldset id="fieldset"> 
    <legend><div id="title">Rules:</div></legend>
        <p class="rules">1st roll:<br>
            2, 3, 12 are losers<br>
            7, 11 are winners<br>
            4, 5, 6, 8, 9, or 10 establish your point for the next roll<br><br>

            Next roll:<br>
            7 is a loser<br>
            Making your point (getting the same value as the first roll) is a winner<br>
            All other values require another roll of the dice</p>
</fieldset>

<canvas id="canvas" width="500" height="500" style="border:5px solid navy blue;"> </canvas>

<input type="button" onclick="print()" value="Roll">


<script>
var ask = prompt("Do you want to play my game of craps? Answer yes or no", "yes")
    if (ask == "yes"){
        var numOfGames = prompt ("How many times do you wish to play?", "4")}
    else if (ask == "no"){
        document.write("Oh, well.")
    }

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "maroon";
ctx.fillRect(300, 175, 200, 200);

var d = document.getElementById("canvas");
var ctx = d.getContext("2d");
ctx.fillStyle = "maroon";
ctx.fillRect(20, 175, 200, 200); 
</script>


</body>
</html>

Ajean · Accepted Answer · 2016-05-11 00:34:11Z

1

The text is the same color as the background, so it displays it but you can't see it. Also, you did not define the font, so you're going to get a very small font.

Change your print code to this:

function print(){ 
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "maroon";
    ctx.fillRect(300, 175, 200, 200);
    ctx.fillStyle = "white";
    ctx.font="100px Georgia";
    ctx.fillText(roll1, 350, 300)


    var d = document.getElementById("canvas");
    var ctx = d.getContext("2d");
    ctx.fillStyle = "maroon";
    ctx.fillRect(20, 175, 200, 200); 

}

However, now that you are able to see the text, there are other problems with the code... but I'm going to assume that it's just that you have not finished coding it.

edited May 11, 2016 at 0:34

Ajean

5,68814 gold badges55 silver badges72 bronze badges

answered May 10, 2016 at 19:40

Sergio Fernandez

3812 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sergio Fernandez Over a year ago

well, are you at least able to see the number on a block?

Sergio Fernandez Over a year ago

when I said other problems, is that when you click on roll all it does is display the number 0 on one block.... did you want more help fixing the rest of the code besides just showing the number on the dice?

cam c Over a year ago

yes, I would please like more help. I've been trying for hours to fix it

Collectives™ on Stack Overflow

Unable to Display Text on Canvas Using JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related