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
It's as simple as this:
document.getElementById("ID").style.background = 'color';
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With