Ewinnn Ewinnn - 1 month ago 7
CSS Question

Change canvas element properties on mouse click

Please see this Fiddle: https://jsfiddle.net/1gb9a2x3/.

I have a full-screen HTML5 canvas element with some blocks moving a bit random. It is a nice effect, which I will tweak later, but what I am trying to do now is change some properties on user input of an individual or multiple elements. So, when the user clicks a button somewhere, change color, move it, hide it, and so on. I tried to manipulate the

update
function on the fly, but unfortunately no luck at all. In the example is currently no code which covers user input, just because nothing I tried seems to work, because of scoping-problems, the limits of canvas-element or other.

I tried to use jQuery for that, by the way. So my question is: is there a way to do a simple piece of jQuery-code like:

$('button').click(function() {
Item[0].width = 10;
update();
});


Any suggestions to get me started are more than welcome. Thank you!

Answer

Your code is almost correct just change it to the following and add a button

$('button').click(function() {
   circles[1].size = Math.random() * 1000;
   // no need for update since it is updated by function draw();
});

it will randomly set a size of circles1

you can check it here https://jsfiddle.net/xbjjrroy/

Comments