How to change fill color of html5 canvas on click event?

Question

I was creating some shapes using HTML5 canvas. I have some colored buttons in the page. The canvas shapes have some default fill style. When I click on the colored buttons I want to change the fill style of the shapes to the corresponding color. I created some demo:

    
       Side Color
       
       
       
       
       
       
   
   
      Top Color
       
       
       
       
       
       
   

   

   
       
    

$('.btn-bg').each(function () {
    $(this).css("background", $(this).data('bg-color'));
});

var cakeCanvas = $('#cake')[0];

var cakeSide = cakeCanvas.getContext('2d');
cakeSide.beginPath();
cakeSide.moveTo(50, 50);
cakeSide.quadraticCurveTo(150, 70, 250, 50);
cakeSide.lineWidth = 2;
cakeSide.fillStyle = '#CCC';
cakeSide.fill();

var cakeSideVert = cakeCanvas.getContext('2d');
cakeSideVert.beginPath();
cakeSideVert.rect(50, 30, 200, 20);
cakeSideVert.fillStyle = "#CCC";
cakeSideVert.fill();

var cakeTopHalf1 = cakeCanvas.getContext('2d');
cakeTopHalf1.beginPath();
cakeTopHalf1.moveTo(50, 30);
cakeTopHalf1.quadraticCurveTo(150, 20, 250, 30);
cakeTopHalf1.fillStyle = "#b4b4b4";
cakeTopHalf1.fill();

var cakeTopHalf2 = cakeCanvas.getContext('2d');
cakeTopHalf2.beginPath();
cakeTopHalf2.moveTo(50, 30);
cakeTopHalf2.quadraticCurveTo(150, 50, 250, 30);
cakeTopHalf2.fillStyle = "#b4b4b4";
cakeTopHalf2.fill();

$('.side_color .btn-bg').click(function(){
    //console.log('side' + $(this).data('bg-color'));
    var fillSide = $(this).data('bg-color');
    cakeSide.fillStyle = fillSide;
    cakeSide.fill();
    cakeSideVert.fillStyle = fillSide;
    cakeSideVert.fill();
});
$('.top_color .btn-bg').click(function(){
    //console.log('top' + $(this).data('bg-color'));
    var fillTop = $(this).data('bg-color');
    cakeTopHalf1.fillStyle = fillTop;
    cakeTopHalf1.fill();
    cakeTopHalf2.fillStyle = fillTop;
    cakeTopHalf2.fill();
});

See more here: http://jsfiddle.net/shafeequemat/sorp8jtv/?. But it is not working good. Some one please help me.

Kaiido · Accepted Answer

Your references to cakeSide,cakeSideVert,cakeTopHalf1 and cakeTopHalf2 are all pointing to the same context object. So when you call stroke() it will only draw the last shape drawn (cakeTopHalf2).

You should instead transform those variables in functions :

$('.btn-bg').each(function () {
        $(this).css("background", $(this).data('bg-color'));
    });

    var cakeCanvas = $('#cake')[0];
	var context = cakeCanvas.getContext('2d');

    function cakeSide(color){
    context.beginPath();
    context.moveTo(50, 50);
    context.quadraticCurveTo(150, 70, 250, 50);
    context.lineWidth = 2;
    context.fillStyle = color || '#CCC';
    context.fill();
	}
    function cakeSideVert(color){
    context.beginPath();
    context.rect(50, 30, 200, 20);
    context.fillStyle = color || "#CCC";
    context.fill();
    }
    function cakeTopHalf1(color){
    context.beginPath();
    context.moveTo(50, 30);
    context.quadraticCurveTo(150, 20, 250, 30);
    context.fillStyle = color || "#b4b4b4";
    context.fill();
    }
    function cakeTopHalf2(color){
    context.beginPath();
    context.moveTo(50, 30);
    context.quadraticCurveTo(150, 50, 250, 30);
    context.fillStyle = color || "#b4b4b4";
    context.fill();
    }
	cakeSide();cakeSideVert();cakeTopHalf1();cakeTopHalf2();
    $('.side_color .btn-bg').click(function(){
        //console.log('side' + $(this).data('bg-color'));
        var fillSide = $(this).data('bg-color');
		cakeSide(fillSide);
        cakeSideVert(fillSide);
    });
    $('.top_color .btn-bg').click(function(){
        //console.log('top' + $(this).data('bg-color'));
        var fillTop = $(this).data('bg-color');
        cakeTopHalf1(fillTop);
        cakeTopHalf2(fillTop);
    });

@charset "utf-8";
body {
    margin: 0px;
    padding: 0px;
}
.container{
    width: 800px;
    margin: 0 auto;
    padding: 30px 0px;
}
.btn-bg{
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    margin-right: 10px;
}
#cake{
    width: 500px;
    height: 400px;
    border: 3px solid #333;
}

How to change fill color of html5 canvas on click event?

Answers (1)

Related Questions