Databases
StackOverflow2013
Postsdbo
PORe-writing a JavaScript variable to HTML5 canvas when the value of the variable has been updated
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORe-writing a JavaScript variable to HTML5 canvas when the value of the variable has been updated
    text
    copied!<p>I'm wondering if there's an easy way to 're-write' the value displayed by a JavaScript variable on a HTML5 canvas when the actual value of the variable has been updated by the user?</p> <p>For example, I'm using the HTML5 canvas and JavaScript to write a very simple game to teach users some basic Welsh.</p> <p>Currently, I have two arrays: one containing 10 .png images for the numbers 1-10, and the other containing 10 strings for the Welsh words for the numbers 1-10.</p> <p>When the user views the page, the canvas displays a 'start game' button, which when clicked, draws one random element from the images array, and one random element from the words array, as well as an image of a tick and a cross.</p> <p>If the image and the word represent the same number, the user should click the tick, if they do not, the user should click the cross. If the user makes the right selection- I have a currentScore variable whose value is increased by 5 (initiated at 0), if they make the wrong selection, the value of currentScore remains the same.</p> <p>When I view the page in the browser, and play the game, if I click on the tick when the image and word represent the number, I can see that the value of currentScore is increased by 5 in the console, but the value of currentScore displayed on the canvas remains the same. Similarly, if I click the cross when they do not match, the score is increased in the console, but not on the canvas.</p> <p>So the logic behind the code is right, and it works, I'm just not sure how I can get the value displayed for currentScore to be updated on the canvas each time its actual value is updated.</p> <p>The function I'm using to do this is below:</p> <pre><code>function drawLevelOneElements(){ /*First, clear the canvas */ context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height); /*This line clears all of the elements that were previously drawn on the canvas. */ /*Then redraw the game elements */ drawGameElements(); /*Create an array of words for numbers 1-10 */ var wordsArray = new Array(); wordsArray[0] = "Un"; wordsArray[1] = "Dau"; wordsArray[2] = "Tri"; wordsArray[3] = "Pedwar"; wordsArray[4] = "Pump"; wordsArray[5] = "Chwech"; wordsArray[6] = "Saith"; wordsArray[7] = "Wyth"; wordsArray[8] = "Naw"; wordsArray[9] = "Deg"; /*Use Math.random() to generate a random number between 1 &amp; 10 to draw the word and image to the canvas */ var drawnImage = Math.floor(Math.random()*10); var drawnWord = Math.floor(Math.random()*10); /*Draw an image and a word to the canvas just to test that they're being drawn */ context.drawImage(imageArray[drawnImage], 100, 30, 30, 30); context.strokeText(wordsArray[drawnWord], 500, 60); /*Now draw the tick and cross to the canvas */ context.font = "30pt Calibri"; /*Set text font and size */ context.drawImage(tick, 250, 200, 50, 50); context.drawImage(cross, 350, 200, 50, 50); /*Add an event listener to the page to listen for a click on the tick or the cross, if the user clicks the right one to indicate whether the image and word relate to the same number or not, increase the user's score*/ myGameCanvas.addEventListener('click', function(e){ console.log('click: ' + e.pageX + '/' + e.pageY); var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; /*If the tick is clicked, check whether or not the image and word represent the same number, if they do, increase the score, if not, leave the score as it is*/ if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage == drawnWord)){ currentScore = currentScore + 5; console.log('Current Score = ' + currentScore); } else if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage != drawnWord)){ currentScore = currentScore; console.log('Current Score = ' + currentScore); /*If the cross is clicked, check whether or not the image and word represent the same number, if they don't, increase the score, otherwise, leave the score as it is*/ } else if((mouseX &gt; 350 &amp;&amp; mouseX &lt; 400) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage != drawnWord)){ currentScore = currentScore + 5; console.log('Current Score = ' + currentScore); } else if ((mouseX &gt; 350 &amp;&amp; mouseX &lt; 400) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage == drawnWord)){ currentScore = currentScore; console.log('Current Score = '+ currentScore); } else { console.log('The click was not on either the tick or the cross.'); } }, false); </code></pre> <p>I wouldn't have thought it would require too much code to do this, but I just can't work out how to do it. Any help would be much appreciated. Thanks!</p> <p>*<strong><em>EDIT</em>*</strong></p> <p>I've added the code in as you suggested, but the score displayed on the canvas is still not updated for some reason...</p> <pre><code>if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage == drawnWord)){ currentScore = currentScore + 5; context.clearRect(currentScorePositionX, currentScorePositionY, 20, 20); /*Clear the old score from the canvas */ context.strokeText(currentScore, 650, 15); /*Now write the new score to the canvas */ console.log('Current Score = ' + currentScore); } else if((mouseX &gt; 250 &amp;&amp; mouseX &lt; 300) &amp;&amp; (mouseY &gt; 200 &amp;&amp; mouseY &lt; 250) &amp;&amp; (drawnImage != drawnWord)){ currentScore = currentScore; console.log('Current Score = ' + currentScore); </code></pre> <p>Any suggestions?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload