Make a canvas object disappear with a mouse click on object

Question

My assignment is to randomly draw 3-6 random sized and random colored rectangles then add another every two seconds and then animate them so they move. Done this. All that is left is to make the rectangles disappear with a mouse click.

My Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 5</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/assignment5.css">
</head>
<body>
    <header>
      <h1>Assignment 5</h>
    </header>

<!--the height and width attributes size the canvas-->
<canvas id="canvas" width="1200" height="600"></canvas>


    <script src="js/assignment5.js" charset="utf-8"></script>
    <footer>
        Copyright &copy no one in particular...
    </footer>

My Javascript

randomBoxes();


function getRandomColor() {         //Generates a random hex number for the color
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 16 | 0).toString(16);
    }
    return color;
}

  function boundryNum(theMin, theMax) {
     var theRange = (theMax - theMin) + 1;
     var randomNum = Math.floor((Math.random() * theRange) + theMin);
     return randomNum;
  }

  function drawbox() {
      var width = Math.floor(Math.random() * 200) +20;    //Random witdth 20-200
      var height = Math.floor(Math.random() * 200) + 20;  //Random height 20-200
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height);  //ctx.fillRect(x, y, width, height), where x and y are the coordinates of the starting place on the canvas.
      context.fillStyle = getRandomColor();
  }

  function randomBoxes(){
    var number = Math.floor(Math.random() * 5) + 1; //Three to six times....
    while(number >= 0){
    drawbox();
    number--;
    }
  setInterval(drawbox, 2000)
  }

My Css

html{
  font-size: 14px;
}

header{
  background-color: black;
  height: 3rem;
  text-align: center;
}

h1{
  color: white;
}

h2{
  color:black;
}



body{
  background-color: black;
  padding-left: 30px;
  padding-right: 30px;
}

#canvas {
  position: absolute;
  top: 4.5rem;              //Starting point top-left.
  left: 1.5rem;
  width: 1000px;
  height: 500px;
  background: black;

  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(800px, 200px);  //(horizotal travel, verticle travel)
  }
}

footer{
  background-color: lime;
  text-align: center;
  color: black;
  margin-top: 800px;
}

I have done two days of research on this and what I have come up with is that I should create an array or each rectangle as they are drawn and using canvas mouse coordinates go through the array making a comparison to the rectangles coordinates and use the clearRectangle attribute of canvas drawings to clear the rectangle. I am really stuck at this last step of this assignment. If you know how it is done I am ready to learn how to do it.

As my final project for this class I want to turn this into a game with increasing harder levels by speeding up the creating of rectangles and giving some of them gradients and shadows. Thanks.

Answer 1

My solution would have been to yes, create an array of each object, giving them an ID as well. Then to delete then such that when they are clicked remove them from the array. "rectangle1.onclick".

You may also want to create a box object each time and do it that way. Rather than just printing a shape on a canvas.

Make a canvas object disappear with a mouse click on object

Question

1 answers

solution1
0 2016-05-08 14:54:00

Make a canvas object disappear with a mouse click on object

Question

1 answers

solution1 0 2016-05-08 14:54:00

solution1
0 2016-05-08 14:54:00