How can I alter the colour of a html5 canvas element using jquery?
Solution 1
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.
Solution 2
It's as simple as this:
document.getElementById("ID").style.background = 'color';
Solution 3
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.
Ollie Jones
Updated on July 09, 2022Comments
-
Ollie Jones almost 2 years
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
-
Ollie Jones almost 12 yearsHi, 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!
-
Val almost 12 yearsSorry for that, so you can go here : stackoverflow.com/questions/9688173/…. It is about background-image but it is the same with background-color. Btw, you can look at this link too : mikechambers.com/blog/2011/01/31/….