Question

57

How can I alter the colour of a html5 canvas element using jquery?

rated 0 times [ 62] [ 5] / answers: 1 / hits: 37492 / 12 Years ago, mon, june 4, 2012, 12:00:00

Basically I have several canvas drawings on my page what I want to happen is when a the jquery function is activated the canvas drawings change to the colour of my choosing. I assume it involves some way of accessing context.fillStyle which defines the original colour but I am unsure how to alter it. In addition, would it be possible to instead give the canvas drawing a css style in the first instance and then change that style when the jquery is processed?

HTML

 <canvas class=canvaslink id=canvasId width=50 height=50></canvas>



 <canvas class=canvaslink id=canvasId2 width=50 height=50></canvas>

Canvas script

<script>

function drawSomething(canvas) {

var context = canvas.getContext(2d);



var width = 125;  // Triangle Width

var height = 45; // Triangle Height

var padding = 5;



// Draw a path

context.beginPath();

context.moveTo(padding + width-125, height + padding);        // Top Corner

context.lineTo(padding + width-90,height-17 + padding); // point

context.lineTo(padding, height-35 + padding);         // Bottom Left

context.closePath();



// Fill the path

context.fillStyle = #9ea7b8;

context.fill();





}



drawSomething(document.getElementById(canvasId));

drawSomething(document.getElementById(canvasId2));



</script>

Jquery Script

<script>

var counter = $('#counter div strong');



var counterH2 = $('h2 strong');



$('#box').click(function(){

    $(#counter).css(display, block);

     var counterValue = counter.text();

     counterValue = ++counterValue;

     counter.text(counterValue);

     counterH2.text(counterValue);

     if (counterValue == 3){

        alert(Thanks for visiting!);

        $('body').css({background-color:#9ea7b8});

        $('body').css({color:#11112c});



        **//I'd like to change the canvas colour here!**



     }



});

</script>

Many thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 12 Years ago gonzaloulyssess · Accepted Answer

In case this is of any use, here is the solution I ended up with:

First the HTML:

<canvas class=canvaslink id=canvasId width=50 height=50></canvas>

<canvas class=canvaslink id=canvasIda width=50 height=50></canvas>



<canvas class=canvaslink id=canvasId2 width=50 height=50></canvas>

<canvas class=canvaslink id=canvasId2a width=50 height=50></canvas>

I created duplicate canvas elements which I used CSS to hide with:

CSS:

#canvasIda, canvasId2a {

    display:none;

}

Then I made the following changes to the original Jquery script:

<script>

var counter = $('#counter div strong');



var counterH2 = $('h2 strong');



$('#box').click(function(){

    $(#counter).css(display, block);

     var counterValue = counter.text();

     counterValue = ++counterValue;

     counter.text(counterValue);

     counterH2.text(counterValue);

     if (counterValue == 3){



        $('body').css({background-color:#9ea7b8});

        $('body').css({color:#11112c});

        $('a').css({color:#11112c});



     //remove the previous canvas elements



        element = document.getElementById(canvasId);

        element2 = document.getElementById(canvasId2);



        element.parentNode.removeChild(element);

        element2.parentNode.removeChild(element2);



    //function to draw new canvas elements with new desired colour



        function drawSomething2(canvas) {

            var context = canvas.getContext(2d);



            var width = 125;  // Triangle Width

            var height = 45; // Triangle Height

            var padding = 5;



    // Draw a path



            context.beginPath();

            context.moveTo(padding + width-125, height + padding);        // Top Corner

            context.lineTo(padding + width-90,height-17 + padding); // point

            context.lineTo(padding, height-35 + padding);         // Bottom Left

            context.closePath();



    // Fill the path

            context.fillStyle = #11112c;

            context.fill();





        }

   //draw the canvas elements



        drawSomething2(document.getElementById(canvasIda));

        drawSomething2(document.getElementById(canvasId2a));



   //display the previously hidden elements containing the new canvas drawings



        $('#canvasIda').css({display:block});

        $('#canvasId2a').css({display:block});



     }



});

I'm sure many can come up with a more efficient solution but this worked and I'm not complaining.