let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;
canvas.style.background="yellow"
canvas.width = window_width;
canvas.height = window_height;
let hit_counter=0;
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
class Circle {
constructor(xpos, ypos, radius, color, text) {
this.position_x = xpos;
this.position_y = ypos;
this.radius = radius;
this.text = text;
this.color = color;
}
// creating circle
draw(context) {
context.beginPath();
context.strokeStyle = this.color;
context.fillText(this.text, this.position_x, this.position_y);
context.textAlign = "center";
context.textBaseline = "middle"
context.font = "20px Arial";
context.lineWidth = 5;
context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
context.stroke();
context.closePath();
}
update() {
this.text=hit_counter;
context.clearRect(0, 0, window_width, window_height)
this.draw(context);
if ((this.position_x + this.radius) > window_width) {
this.dx = -this.dx;
}
if ((this.position_x - this.radius) < 0) {
this.dx = -this.dx;
}
if ((this.position_y - this.radius) < 0) {
this.dy = -this.dy;
}
if ((this.position_y + this.radius) > window_height) {
this.dy = -this.dy;
}
this.position_x += this.dx;
this.position_y += this.dy;
}
}
let my_circle = new Circle(100, 100, 50, 'Black', hit_counter);
my_circle.update();
<button>ex1</button>
<button>ex2</button>
<button>ex3</button>
<button>ex4</button>
<button>ex5</button>
<button>ex6</button>
<button>ex7</button>
<button>ex8</button>
<canvas id="canvas"></canvas>HTML How can I align and design buttons within a canvas? My attempt to add CSS styling to the buttons didn't yield positive results. How can I achieve this? What is the best way to center the buttons within the canvas?
<button>ex1</button>
<button>ex2</button>
<button>ex3</button>
<button>ex4</button>
<button>ex5</button>
<button>ex6</button>
<button>ex7</button>
<button>ex8</button>
<canvas id="canvas"></canvas>
JS How can I align and style buttons within a canvas? My attempts to apply CSS to the buttons were not successful. How can I do this effectively? What's the method to center the buttons in the canvas?
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;
canvas.style.background="yellow"
canvas.width = window_width;
canvas.height = window_height;
let hit_counter=0;
function randomIntFromInterval(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}
class Circle {
constructor(xpos, ypos, radius, color, text) {
this.position_x = xpos;
this.position_y = ypos;
this.radius = radius;
this.text = text;
this.color = color;
}
// creating circle
draw(context) {
context.beginPath();
context.strokeStyle = this.color;
context.fillText(this.text, this.position_x, this.position_y);
context.textAlign = "center";
context.textBaseline = "middle"
context.font = "20px Arial";
context.lineWidth = 5;
context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
context.stroke();
context.closePath();
}
update() {
this.text=hit_counter;
context.clearRect(0, 0, window_width, window_height)
this.draw(context);
if ((this.position_x + this.radius) > window_width) {
this.dx = -this.dx;
}
if ((this.position_x - this.radius) < 0) {
this.dx = -this.dx;
}
if ((this.position_y - this.radius) < 0) {
this.dy = -this.dy;
}
if ((this.position_y + this.radius) > window_height) {
this.dy = -this.dy;
}
this.position_x += this.dx;
this.position_y += this.dy;
}
}
let my_circle = new Circle(100, 100, 50, 'Black', hit_counter);
my_circle.update();