CODEWITHSUNDEEP
javascriptjquerycsshtmlcanvas
Ewinnn
Ewinnn

Reputation: 337

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!

Upvotes: 1

Views: 821

Answers (2)

Molda
Molda

Reputation: 5704

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/

Upvotes: 1

Zachary Brooks
Zachary Brooks

Reputation: 300

I couldn't get my code to work because I couldn't see the errors, but what you can do is declare some kind of array with predefined colors in it, like 

fillColors = ["rgba(255,150, 0,","rgba(255, 255, 255,"];

Then in the canvas onclick, do a for loop that sets the 'circles' color to the one next in the array. (Also, make sure to give the items object a color property, and use ctx.fillStyle = this.color; in the update function so this works)

canvas.onclick = function(){
    for(var i = 0; i < circles.length; i++){
        circles[i].color = fillColors[0] + circles[i].opacity + ')';
        // first output is "rgba(255,150, 0, opacity)"
    }
    //then move the color to the end of the array
    var color1 = fillColors[0];
    fillColors.splice(0, 1);
    fillColors.push(color1);
}

I hope I've helped and good luck!

Upvotes: 1

Related Questions