CODEWITHSUNDEEP
javascripthtmlcanvas
user5533608
user5533608

Reputation:

making random colors in shapes on canvas

I have a code for making random shapes on canvas. i want to fill the shapes with random colors, for this i made this:

var R=(Math.floor(Math.random() * 255);
    var G=(Math.floor(Math.random() * 255);
    var B=(Math.floor(Math.random() * 255);
    var randColor='rgb(' + R +', ' + G + ',' + B +')';

    context.fillStyle=randColor;

I put this inside the functions that generats my shapes, but with no luck. for the example, ive put it only in the makeRect function, but it should be in the makeCircle function too. Can any one tell me what i made wrong here?

This is my HTML: 

<head>
<link href="design.css" rel="stylesheet" />
</head>

<body>
     <h4> Enter below, and then press the canvas to save your work</h4>
  <canvas id="canvas" width="1000" height="750"></canvas>
  <br/>
  <br/>
  <span>
    How many Circles do you want?
    <input id="inCircle" />
    </span>
  <br/>How many Squers do you want?
  <input id="inSquer" />
  <br/>
  <button id="creat">Creat My Work</button>

  <script src="js.js"></script>
</body>

</html>

This is my JavaScript:

var drawing = document.getElementById("canvas");
var context = drawing.getContext("2d");
var inSquer = document.getElementById("inSquer");
var inCircle = document.getElementById("inCircle");
var button = document.getElementById("creat");


button.addEventListener("click", function() {


  paint(parseInt(inSquer.value), parseInt(inCircle.value));
});

drawing.addEventListener("click", function() {
  saveImage();
});


function saveImage() {
  window.location = drawing.toDataURL("image/jpeg");
}

function paint(numOfRect, numOfCirc) {

  for (var makeIt = 0; makeIt < numOfRect; makeIt++) {
    makeRect(drawing, context);
    makeCircle(drawing, context);
  }
}

function makeCircle(drawing, context) {

  var radius = Math.floor(Math.random() * 100);
  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);

  context.beginPath();
  context.arc(x, y, radius, 0, 2 * Math.PI);
  context.fillStyle = "blue";
  context.fill();
}

function makeRect(drawing, context) {

  var w = Math.floor(Math.random() * 100);
  var x = Math.floor(Math.random() * canvas.width);
  var y = Math.floor(Math.random() * canvas.height);

    var R=(Math.floor(Math.random() * 255);
    var G=(Math.floor(Math.random() * 255);
    var B=(Math.floor(Math.random() * 255);
    var randColor='rgb(' + R +', ' + G + ',' + B +')';

    context.fillStyle=randColor;

    /*context.fillStyle="green";*/
    context.fillRect(x, y, w, w);
}

And this is my css:

h4{
text-align: center;
}
#canvas{
    margin-left: 250px;
    border: 1px solid black;

}

Upvotes: 1

Views: 1090

Answers (2)

Canvas
Canvas

Reputation: 5897

You are missing some brackets at 

var R=(Math.floor(Math.random() * 255);
var G=(Math.floor(Math.random() * 255);
var B=(Math.floor(Math.random() * 255);

put this for it to work 

var R=(Math.floor(Math.random() * 255));
var G=(Math.floor(Math.random() * 255));
var B=(Math.floor(Math.random() * 255));

Upvotes: 0

Andrew Bone
Andrew Bone

Reputation: 7291

Your first bit of JS was missing some brackets.

var R = (Math.floor(Math.random() * 255)),
    G = (Math.floor(Math.random() * 255)),
    B = (Math.floor(Math.random() * 255)),
    randColor = 'rgb(' + R + ', ' + G + ',' + B + ')';

Upvotes: 1

Related Questions