jjberg
jjberg

Reputation: 73

How do I partly refresh my <canvas> element with JavaScript?

I´ve made a personality test on an HTML page using JavaScript. Basically, the user chooses an answer to a question, and the paragraph beneath changes content and a black dot appears in the colored grid (which I created with a canvas element) to indicate your personality color.

At first everything seems to be working quite nicely. Problem is, if you´ve done it once and want to do it again, you can´t just pick one of the other answers and click the green button. Now two black dots will appear in the colored grid. Does anybody have any idea of how I could solve this in my JavaScript code?

Here is my code:

    // The draw function loads when the page is opened
      function draw() {
        let canvas = document.getElementById('canvas');
        if (canvas.getContext) {
          let ctx = canvas.getContext('2d');
    
        // The 4 colored squares
        ctx.fillStyle = 'rgb(204, 51, 0)';
        ctx.fillRect(0, 0, 150, 150);
        ctx.fillStyle  = 'rgb(51, 153, 51)';
        ctx.fillRect(0, 150, 150, 150);
        ctx.fillStyle = 'rgb(255, 255, 0)';
        ctx.fillRect(150, 0, 150, 150);
        ctx.fillStyle = 'rgb(51, 102, 204)';
        ctx.fillRect(150, 150, 150, 150);
    
    
      }
      }
    
        const form = document.querySelector('form');
        let btn = document.querySelector('button');
        let para = document.querySelector('p');
    
        //Event listener for the button
        btn.addEventListener('click', myColor);
    
        function myColor() {
          let choice = form.color.value;
          let canvas = document.getElementById('canvas');
          if (!choice) {
            para.textContent = 'Please chose one of the answers above.';
          }
    
          if (choice === 'red') {
            para.textContent = 'You´re so red!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75, 75, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
    
          } else if (choice === 'blue') {
            para.textContent = 'You´re so blue!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(225, 225, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
    
          else if (choice === 'yellow') {
            para.textContent = 'You´re so yellow!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(225, 75, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
    
          else if (choice === 'green') {
            para.textContent = 'You´re so green!';
            // Adding a black circle to indicate color on canvas
            if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(75, 225, 23, 0, Math.PI * 2, true);
            ctx.fillStyle ='rgb(0, 0, 0)';
            ctx.fill();
          }
          }
      }
<body onload="draw();">
    
      <form action="">
      <h1>A friend invites you to a party. You...</h1>
      <br />
    
      <input id="red" type="radio" name="color" value="red">...bluntly tell your friend you have other priorities. <br/>
      <input id="blue" type="radio" name="color" value="blue">...tell your friend you are finishing a coding assignment tonight. <br/>
      <input id="yellow" type="radio" name="color" value="yellow">...hug your friend and start discussing the outfit. <br/>
      <input id="green" type="radio" name="color" value="green">...thank your friend for inviting you, and tell her you look forward to it. <br/>
    
      </form>
    
      <button> Show me the color of my personality! </button>
    
      <canvas id="canvas" width="300" height="300">
      A picture of where your personality type fits in.
      </canvas>
    
      <p></p>
    
  

Upvotes: 1

Views: 795

Answers (2)

Steven Stark
Steven Stark

Reputation: 1259

What you're looking for is the clearRect method:

CanvasRenderingContext2D.clearRect()

This will allow you to clear your 2D context of pixels.

Upvotes: 1

Sparlarva
Sparlarva

Reputation: 804

One way could be to remove the canvas element and reapply it when the button is clicked.

function myColor() {
  let choice = form.color.value;

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
  let canvas = document.getElementById('canvas');
  if (!choice) {
    para.textContent = 'Please chose one of the answers above.';
  }

.......

OR using

ctx.clearRect(0, 0, canvas.width, canvas.height);

In place of the previous suggestion.

Upvotes: 1

Related Questions