Premium Features

Download Video

Interacting with The Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 4

Published 6 years ago

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

DisIsCodeUFool posted a year ago

`<h1>hello</h1>`

DisIsCodeUFool posted a year ago

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.

SomeoneLostJSLibary posted a year ago

Where can I find the cheet sheet

chris posted a year ago

https://chriscourses.com/dashboard/goodies when logged in

DisIsCodeUFool posted a year ago

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.

chris posted a year ago

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 🙌

DisIsCodeUFool posted a year ago

Sorry for the very late reply, I was on holiday. Thanks, I found that helpful.

CR4ZED posted 2 years ago

thank you so much for making these amazing videos😃😃

chris posted 2 years ago

Anytime, thanks for watching!

Interacting with The Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 4

`<h1>hello</h1>`

Education

Support

Transparency

Legal