Premium Features

Download Video

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

Published 7 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

Ojha0Green posted 7 months ago

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?

Ojha0Green posted 7 months ago

DisIsCodeUFool posted 3 years ago

`<h1>hello</h1>`

DisIsCodeUFool posted 3 years 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 3 years ago

Where can I find the cheet sheet

chris posted 3 years ago

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

DisIsCodeUFool posted 3 years 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 3 years 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 3 years ago

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

CR4ZED posted 3 years ago

thank you so much for making these amazing videos😃😃

chris posted 3 years ago

Anytime, thanks for watching!

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

`<h1>hello</h1>`

Education

Support

Transparency

Legal