javascript - How can I alter the colour of a html5 canvas element using jquery? -
basically have several canvas drawings on page want happen when jquery function activated canvas drawings change colour of choosing. assume involves way of accessing context.fillstyle defines original colour unsure how alter it. in addition, possible instead give canvas drawing css style in first instance , change style when jquery 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 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 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 visiting!"); $('body').css({"background-color":"#9ea7b8"}); $('body').css({"color":"#11112c"}); **//i'd change canvas colour here!** } }); </script> many thanks
it's simple this:
document.getelementbyid("id").style.background = 'color';
Comments
Post a Comment