Unable to toggle img inside canvas (HTML&JavaScript Beginner)

[c0d0ps]

Hi I'm using a .html file

Languages: HTML, JavaScript
Level: Beginner

 

Problem:

Unable to toggle img inside canvas

I only want the img inside the canvas to disappear not the "image to use"

Spoiler

 

HTML

Spoiler

 <h1>Draw Image</h1>

<p>Image to use:</p>
<img id="scream" src="../Images/img_the_scream.jpg" alt="The Scream" 
width="220" height="227">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border: 1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.
</canvas>

<p><button onclick="myCanvas()">Try it</button></p>
<p><button onclick="toggle()">Toggle it</button></p>

 

Javascript

Spoiler

function myCanvas()
{
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
}      
function toggle()
{
  var c = document.getElementById("scream");

  if (c.style.display=="none")
{
  c.style.display="block";
}
else
{
  c.style.display="none";
}
}

 

[RockSolid1106]

51 minutes ago, c0d0ps said:

I only want the img inside the canvas to disappear not the "image to use"

 

51 minutes ago, c0d0ps said:

var c = document.getElementById("scream");

You're grabbing #scream instead of #myCanvas..

[c0d0ps]

On 4/1/2022 at 3:34 PM, RockSolid1106 said:

 

You're grabbing #scream instead of #myCanvas..

It's definitely a lot better, thanks.

Spoiler

However i'm looking to remove the picture in the canvas not the entire canvas.

I'm guessing I need to create a scream2 after it has been put in the canvas but I am not sure how.

[C2dan88]

You want the toggle function to toggle a variable between 1 and 0. When the value is 1 draw the image. When it is 0 reset the canvas in the myCanvas function

var drawScream = 1

function myCanvas()
{
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  
  if(drawScream)
  {
  	var img = document.getElementById("scream");
  	ctx.drawImage(img,10,10);
  }
  else
  	ctx.clearRect(0, 0, c.width, c.height);
}

function toggleScream()
{
	drawScream = (drawScream == 1) ? 0 : 1;
  // call mycanvas
  myCanvas();
}

 

[c0d0ps]

15 hours ago, C2dan88 said:

You want the toggle function to toggle a variable between 1 and 0. When the value is 1 draw the image. When it is 0 reset the canvas in the myCanvas function

SNIP

 

Hi, thanks for answer.

Nothing happens when I press toggle or the "on-button" 

Update: I forgot this, it works now thank you.

Spoiler

var drawScream = 1

 

Javascript

Spoiler

<script title="Default">
function myCanvas()
{
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

if (drawScream)
{
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
else
{
ctx.clearRect(0, 0, c.width, c.height);
}
}
</script>
    
<script title="toggleScream">
function toggle()
{
drawScream = (drawScream == 1) ? 0 : 1;
// Call mycanvas
myCanvas();
}
</script>

 

 

[c0d0ps]

15 hours ago, C2dan88 said:

You want the toggle function to toggle a variable between 1 and 0. When the value is 1 draw the image. When it is 0 reset the canvas in the myCanvas function

SNIP

 

Bonus question (already marked answer for solution):

 What does this mean?

Spoiler

drawScream = (drawScream == 1) ? 0 : 1;

 

I know about if-else statements, for-while statements, but I haven't seen this before.
What should I read about to learn about this?

[RockSolid1106]

5 hours ago, c0d0ps said:

I know about if-else statements, for-while statements, but I haven't seen this before.

This is a ternary operator.

5 hours ago, c0d0ps said:

(drawScream == 1) ?

This corresponds to the if condition. Checking if drawScream equals 1.

 

5 hours ago, c0d0ps said:

(drawScream == 1) ? 0

The value after the question mark(?) is the value to be assigned if the condition is true.

5 hours ago, c0d0ps said:

0 : 1;

The value after the colon is what the value of that variable would be if the condition is false. Essentially, an if else statement.

[c0d0ps]

On 4/5/2022 at 3:41 PM, RockSolid1106 said:

This is a ternary operator.

This corresponds to the if condition. Checking if drawScream equals 1.

 

The value after the question mark(?) is the value to be assigned if the condition is true.

The value after the colon is what the value of that variable would be if the condition is false. Essentially, an if else statement.

Found it on Mozilla, thank you for the explanation.