I know, the title was very vague. I have this problem. I have a canvas with a width and a height. But when I am making "x" and "y" positions for these circles and rectangles, they don’t exactly end up where I need them to. They will be off of the canvas.
Note: I think the answer is how I do my Math.random(). I might be making the ranges of what I want incorrectly.
Note: I haven’t finished the code. I have barely started the rectangles and am still working on the "stop" and "start" buttons. The circles part (x and y positions) is what I need help with.
Javascript:
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const canvasWidth = 1024;
const canvasHeight = 576;
const circleCounter = document.querySelector('#circle-counter');
const rectangleCounter = document.querySelector('#rectangle-counter');
const start = document.querySelector('#start');
const stop = document.querySelector('#stop');
let rectCount = 0;
let circCount = 0;
function draw() {
let circleId = setInterval(drawCircle, 500);
//let rectangleId = setInterval(drawRectangle, 1000);
}
function drawCircle() {
//Creates a random hex code
let randomColor = Math.floor(Math.random() * 16777215).toString(16);
let color = "#" + randomColor;
let radius = Math.round(Math.random() * 15 + 15);
let diameter = 2 * radius;
let centerX = Math.round(Math.random() * ((canvasWidth - diameter) - (0 + diameter)) + diameter);
let centerY = Math.round(Math.random() * ((canvasHeight - diameter) - (0 + diameter)) + diameter);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
circCount++;
circleCounter.innerHTML = circCount;
}
function drawRectangle() {
let randomColor = Math.floor(Math.random() * 16777215).toString(16);
let color = "#" + randomColor;
let rectangleWidth = Math.round(Math.random() * 15 + 15);
let rectangleHeight = Math.round(Math.random() * 15 + 15);
let cornerX = Math.round(Math.random() * (canvasWidth - 2 * rectangleWidth) + rectangleWidth);
let cornerY = Math.round(Math.random() * (canvasHeight - 2 * rectangleHeight) + rectangleHeight);
}
function reset() {
let confirmationStatement = confirm("Are you sure you want to reset?");
if (confirmationStatement) {
location.reload();
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta name="author" content="Christian Davis">
<link rel="stylesheet" href="styles.css">
<title>Paint Splatter</title>
</head>
<body>
<div class="buttons">
<button id="start" onclick="draw()">Start</button>
<button id="stop">Stop</button>
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="counter-display">
<h2>Total Circles: <span id="circle-counter"></span></h2>
<h2>Total Rectangles: <span id="rectangle-counter"></span></h2>
</div>
<canvas id="canvas"></canvas>
<script src="app.js"></script>
</body>
</html>
I am attempting to make a bunch of circles and rectangles appear onto a canvas at random positions with random colors and sizes. I am also trying to keep count of how many circles and rectangles there are.
2
Answers
After a bit of tinkering with my HTML and CSS and using the solution proposed by "moon", I have found the solution. All I had to do was create the height and width in the actual canvas tag of the HTML. What I had done was make the height and width in CSS. I don't know why it didn't work before necessarily, but it works now.
Javascript:
HTML:
CSS:
I think you forgot to set width and height to your canas,and it must set on canvs tag not in your css