Premium Features
Interacting with The Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 4
Adding animation is cool and all, but we can take things one step further by providing users the ability to interact with our shapes. Doing so creates a sort of surprise that web users typically don't expect.
Look around the web, how many sites can you list off that include some sort of interactive art piece that meshes with the site's overall look and feel? Probably not many.
In regards to making your site stand out from the rest, there's no better solution than adding an interactive design. Learn how, within this episode of Chris Courses.
Comments
Want to participate?
Create a free Chris Courses account to begin
Hi! I just finished this tutorial, but now my circles only appear after the screen is resized, rather than upon loading the screen... do you have any suggestions to fix that? I know with a couple of your video game tutorials you have a link to the .js coding, do you have something similar for this one?
<h1>hello</h1>
Hi its me again I have some code that will produce a circle when mouse will move and clicked. It will be destroyed when it hits the window inner Height. I want to make to rainbow while you move the mouse. Is it possible you could help me pls.
Here is the code:
/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var maxDist = 50;
var mouse = {
x: undefined,
y: undefined,
}
var circleArray = [];
canvas.addEventListener("mousemove", function(event) {
mouse.x = event.x;
mouse.y = event.y;
for (var i = 0; i < 1; i++) {
//var x = Math.random() (canvas.width - r 2) + r;
//var y = Math.random() (canvas.height - r 2) + r;
var r = Math.random() * 30;
var dx = (Math.random() - 0.5) * 45;
var dy = (Math.random() - 0.5) * 45;
circleArray.push(new Circle(mouse.x, mouse.y, dx, dy, r, "black"));
}
})
canvas.addEventListener("click", function(event) {
mouse.x = event.x;
mouse.y = event.y;
for (var i = 0; i < 100; i++) {
//var x = Math.random() (canvas.width - r 2) + r;
//var y = Math.random() (canvas.height - r 2) + r;
var r = Math.random() * 30;
var dx = (Math.random() - 0.5) * 40;
var dy = (Math.random() - 0.5) * 40;
circleArray.push(new Circle(mouse.x, mouse.y, dx, dy, r, "purple"));
}
})
class Circle {
constructor(x, y, dx, dy, r, c) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.r = r;
this.color = c
}
draw() {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();
}
update() {
if (this.x + this.r > canvas.width || this.x - this.r < 0) {
this.dx = -this.dx;
this.r -= this.r;
}
if (this.y + this.r > canvas.height || this.y - this.r < 0) {
this.dy = -this.dy;
this.r -= this.r;
}
this.x += this.dx;
this.y += this.dy;
if (mouse.x - this.x < maxDist && mouse.x - this.x > -maxDist && mouse.y - this.y < maxDist && mouse.y - this.y > -maxDist) {
this.dx = -this.dx;
this.dy = -this.dy;
}
this.draw();
}
}
function animate() {
requestAnimationFrame(animate);
ctx.fillStyle = "rgba(45, 45, 45, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < circleArray.length; i++) {
circleArray[i].update();
}
}
animate();
pls help me make it raindow.
Where can I find the cheet sheet
You know where there is mouse click interaction and stuff like mouse move in an event listener. could you give a guide on them please? I am 13 years old.
Interactions all come down to adding "eventListeners," basically pieces of code that fire another piece of code when some sort of event such as a mouse click occurs.
The one I use the most is:
addEventListener('click', () => {
// code to be fired on click goes here
console.log('mouse clicked!')
})Here, 'click' specifies the event that'll fire the code, such as a click or keypress, and then everything in the () => {} specifies what code should be called as a result.
Hopefully that helps a little bit, know it can be confusing at first, but great to hear you're starting so young—you'll be way ahead of everyone down the line 🙌
thank you so much for making these amazing videos😃😃
Anytime, thanks for watching!
Hi! I just finished this tutorial, but now my circles only appear after the screen is resized, rather than upon loading the screen... do you have any suggestions to fix that? I know with a couple of your video game tutorials you have a link to the .js coding, do you have something similar for this one?