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

Question

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

score 14 · Answer 1 · edited Mar 07 '14 at 02:12

14

It's as simple as this:

document.getElementById("ID").style.background = 'color';

edited Mar 07 '14 at 02:12

Spedwards

4,167
16
49
106

answered Jun 02 '13 at 15:10

David

337
1
3
7

score 2 · Answer 2 · answered Jun 04 '12 at 14:28

2

You can do that :

var context = canvas.getContext('2d');
context.fillStyle = "#000000";
context.fill();
// Other properties ...

You can see an HTML5 canvas tutorial (very simple) here.

answered Jun 04 '12 at 14:28

Val

762
8
32

Hi, thanks but I think you may be confused by the question. I have already set the colour the problem is altering it after the user interacts with something. Hence in the jquery code: //I'd like to change the canvas colour here! – Ollie Jones Jun 04 '12 at 14:36
Sorry for that, so you can go here : http://stackoverflow.com/questions/9688173/change-background-image-in-html5-canvas. It is about background-image but it is the same with background-color. Btw, you can look at this link too : http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/. – Val Jun 04 '12 at 14:43

score -4 · Accepted Answer · answered Jun 10 '12 at 15:31

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.

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

3 Answers3